Gửi nhiều trường nhập tệp theo lập trình trong một biểu mẫu

Question

Tôi đang cố gắng sử dụng plugin blueimp/jQuery-File-Upload để lập trình gửi nhiều trường nhập tệp dù có cùng một biểu mẫu.

Khi người dùng chọn tệp biểu mẫu, nó chỉ thêm chúng vào biến JS để tiếp tục gửi chúng với phương thức $('#form').fileupload('send') về gửi biểu mẫu. Mục tiêu của tôi là sử dụng cùng một biểu mẫu đồng bộ chính xác mà tôi đã sử dụng trước đây theo cách không đồng bộ. Vì vậy, khi người dùng nhấp vào nút gửi biểu mẫu, nó ngăn tác vụ mặc định và họ cho phép plugin thực hiện tác vụ, gửi tất cả dữ liệu biểu mẫu và hiển thị tiến trình tải lên tổng thể.

tôi chủ yếu làm theo các hướng dẫn:

• https://github.com/blueimp/jQuery-File-Upload/wiki/API
• https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Input-Fields-in-One-Form

Trên thực tế nó gần như làm việc, nhưng nó không gửi tập tin nhiều hơn một đầu vào cho các máy chủ kết thúc. Trong sự kiện fileuploadadd tôi đang đẩy data.files[0] (đầu vào tệp của tôi chỉ là một tệp, nhưng mỗi tệp sử dụng các thuộc tính accept khác nhau) cho mảng "toàn cầu" uploadable và sau đó gửi biểu mẫu tôi sử dụng một cái gì đó như $('#form').fileupload('send', {files: uploadable}).

Tôi đoán tôi không làm đúng cách, vì chỉ một tệp được gửi cùng với dữ liệu biểu mẫu. Cách chính xác để lập trình gửi nhiều tệp đầu vào tệp bằng cách sử dụng một biểu mẫu đơn là gì?

Tôi cũng không quá tự tin về tiến trình tải lên tổng thể ... Nếu tôi sử dụng sự kiện fileuploadprogressall để đọc tiến trình tải lên, báo cáo có đang báo cáo tiến trình của tất cả các tệp đã tải lên không?

JS (giản thể)

$(function() { 
    var uploadable = []; 

    $('#form').fileupload({ 
     autoUpload: false, 
     singleFileUploads: false, 
     add: function (event, data) { 
      uploadable.push(data.files[0]); 

      return false; 
     }, 
     // other event callbacks 
    }) 
     .prop('disabled', !$.support.fileInput) 
     .parent().addClass($.support.fileInput ? undefined : 'disabled'); 

    $('#form').submit(function (event) { 
     event.preventDefault(); 

     $('#form').fileupload('send', {files: uploadable}); 
    }); 
}); 

HTML

<form id="form" action="upload" method="post" enctype="multipart/form-data"> 
    <!-- other text/hidden inputs that will also be sent --> 
    <input type="file" name="image" id="image" accept="image/*" /> 
    <input type="file" name="video" id="video" accept="video/*" /> 
</form> 

Answer 1

uploadable.push(data.files[0]) 

Bạn sinh động nói với trình biên dịch để chỉ đẩy các tập tin đầu tiên.
Bạn đã thử sử dụng foreach và đẩy tất cả các tệp?

Cảm ơn bạn,