Cách sử dụng JQuery-File-Upload để tải lên nhiều hình ảnh trên một trang trong khi tạo bài đăng?

Question

Tôi nhận ra rằng không có giải pháp nào bằng cách sử dụng jQuery-File-Upload và Carrierwave hoặc Dragonfly để tạo khả năng trên một trang khi tạo bài đăng để thêm nhiều hình ảnh. Tôi có hai mô hình một bài đăng với nhiều hình ảnh. Tôi muốn tải lên hình ảnh ngay lập tức sau khi được thêm và có tùy chọn hủy hình ảnh đó trước khi lưu toàn bộ Bài đăng mới. Mã của tôi không hoạt động vì vậy tôi đã không dán nó ở đây, có lẽ ai đó có ví dụ, cho dù khái niệm này là ở tất cả khả thi với jQuery-File-Upload? Nếu không có cách nào khác để lưu nhiều ảnh và giữ chế độ xem bootstrap? Tôi tìm thấy các ví dụ tốt đẹp mà sẽ đại diện cho một tương tự như các chức năng dự kiến ​​nhưng với Upladify: FormFly hoặc chỉ với Carrierwave và nested_form: carrierwave-nested_form. Trên jQuery-File-Upload git wiki là hướng dẫn cách sử dụng nó chỉ với một mô hình trong Rails.

Tôi muốn để có được một cái gì đó như thế này:

Answer 1

Vấn đề chính với tất cả điều này là câu hỏi "Làm sao người ta có thể tạo ra một hiệp hội với một đối tượng mà không tồn tại?". Vâng, bạn không thể. Những gì bạn có thể làm là điều tốt nhất tiếp theo, outsmart nó. Tôi sẽ chỉ cho bạn cách làm điều đó, trong 3 bước đơn giản. Tôi cố ý không đăng bất kỳ mã nào, vì quá trình tự nó phải khá rõ ràng và có thể áp dụng cho nhiều cách tiếp cận khác nhau (không chỉ giới hạn ở jQuery-File-Upload và Carrierwave hoặc Dragonfly).

Bước 1

cài đặt từng phần của mối quan hệ như bình thường, một cách độc lập. Sử dụng một giàn giáo (hoặc bất kỳ thứ gì) để tạo một bài đăng mới. Ngay bên dưới biểu mẫu cho bài đăng, triển khai giải pháp tải lên ảnh của bạn như bình thường. Tôi sẽ sử dụng bộ điều khiển riêng của từng đối tượng và partials, như bình thường, để ngăn chặn những thứ này không thể trộn lẫn với nhau. Đừng lo lắng về mã liên kết mối quan hệ.

Bước 2

Thêm mã mối quan hệ của bạn với các mô hình của bạn. Đừng lo lắng rằng giao diện không kết hợp chúng đúng cách.

Bước 3(phần thú vị)

Bây giờ, để buộc nó tất cả cùng nhau. Chúng tôi có hình ảnh được tạo nhưng không thuộc về bất kỳ bài đăng nào. Chúng tôi cũng có các bài đăng được tạo mà không có bất kỳ hình ảnh nào của họ. Chúng ta cần một số cách để hoàn thành sự liên kết này. Giải pháp khá đơn giản. Bạn cần tạo một trường văn bản ẩn trong biểu mẫu bài đăng để chứa các ID của hình ảnh được liên kết với bài đăng. Sau đó, phản hồi tạo hình ảnh của bạn, thêm ID của hình ảnh mới vào trường văn bản cùng lúc bạn thêm hình ảnh mới vào trang.Tương tự, trong bộ điều khiển bài viết, chỉ cần lặp qua các ID từ trường ẩn và liên kết (các) đối tượng đích trước khi lưu. Có thể bạn sẽ muốn thêm logic tương tự vào nút hủy, như xóa ID khỏi mảng khi hình ảnh bị xóa khỏi trang. Bạn cũng có thể muốn thêm tác vụ được lên lịch để xóa hình ảnh qua một độ tuổi nhất định không được liên kết với bài đăng, để xóa mọi lộn xộn khỏi các biểu mẫu bị bỏ qua.

Answer 2

Tôi tìm thấy một ví dụ nhỏ tải lên hình ảnh multible với JqueryFileUpload trong đường ray với carrierwave.

Tôi hiện đang làm việc trên một giải pháp tốt hơn để tải xuống các tệp tải lên nhiều tệp với JqueryFileUpload nhưng chủ đề này không dễ dàng như vậy.

In this example

Tạo một giàn giáo bài với cơ thể: string khi bạn thiết lập một thể hiện của một bài đối tượng mới trong hành động mới pictures_controller bạn có thể thực hiện một hình thức cho một bài đăng trong các hình ảnh/xem mới.

<%= form_for(@post) do |f| %> 
    <div class="field"> 
    <%= f.label :body %><br /> 
    <%= f.text_field :body %> 
    </div> 
    <div class="actions"> 
    <%= f.submit %> 
    </div> 
<% end %>