All geek questions in one place

Sending several file input fields programmatically in one form

I am trying to use the blueimp / jQuery-File-Upload plugin to programmatically send more than one file input field, albeit in the same form.

When the user selects the form files, he simply adds them to the JS variable to submit them using the $('#form').fileupload('send') method when submitting the form. My goal is to use the exact same synchronous form that I used before, in an asynchronous manner. Therefore, when the user clicks the submit button of the form, he prevents the default action, and they allow the plug-in to complete the task, send all form data and show the overall download result.

I mainly follow these guides:

In fact, it almost works, but does not send more than one input file to the server. In the fileuploadadd event fileuploadadd I click data.files[0] (my file inputs are just one file, but each of them uses different accept attributes) into a “global” uploadable array, and then when I uploadable form I use something like $('#form').fileupload('send', {files: uploadable}) .

I assume that I am not doing it right, since only one file is sent along with the form data. What is the correct way to programmatically send multiple file input files using one form?

I'm also not too sure about the overall success of the download ... If I use the fileuploadprogressall event to read the download process, will it report the progress of all downloaded files?

JS (Simplified)

 $(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>
+5
source share
1 answer
 uploadable.push(data.files[0])

You vividly told the compiler to just click on the first file.
Have you tried using foreach and popping all files?

Thanks,

0
source

Source: https://habr.com/ru/post/1202803/

More articles:


All Articles