以一种形式以编程方式发送多个文件输入字段 [英] Sending multiple file input fields programmatically in one form

问题描述

我正尝试使用 blueimp / jQuery-File-Upload 插件以编程方式通过相同的形式发送多个文件输入字段。当用户选择表单文件时，它只是将它们附加在一个JS变量中，以进一步将它们发送给 $（'＃form'）。fileupload（ 'send'）表单提交。我的目标是以异步的方式使用我之前使用的完全相同的同步表单。所以当用户点击表单提交按钮时，它会阻止默认操作，他们让插件完成任务，发送所有表单数据并显示整体上传进度。

m主要遵循以下指南：

• https://github.com/blueimp/jQuery-File-Upload/wiki/API


• https://github.com/blueimp/jQuery-File-上传/维基/多文件输入字段在一个表格

其实它几乎可以工作，但它不会向服务器端发送多个输入文件。在 fileuploadadd 事件中，我正在推送 data.files [0] （我的文件输入只是单个文件，他们使用不同的接受属性）到一个全局可上传的数组，然后在表单提交我使用类似于 $（'＃form'）。fileupload（'send'，{files：uploadable}）。

我没有这样做，因为只有一个文件与表单数据一起发送。什么是使用单一表单以编程方式发送多个文件输入文件的正确方法？

我对整体上传过程也不太自信...如果我使用 fileuploadprogressall 事件来读取上传进度，它会报告所有上传文件的进度？

JS （简体）

  $（function（）{
 var uploadable = []; 
 
 $（'＃form'）。fileupload（{
 autoUpload：false，
 singleFileUploads：false，
 add：function（event，data）{
 uploadable.push（data.files [0]）; 
 
返回false; 
}，
 //其他事件回调
}）
 .prop （'disabled'，！$。support.fileInput）
 .parent（）。addClass（$。support.fileInput？undefined：'disabled'）; 
 $ b $（'＃form' ）.submit（function（event）{
 event.preventDefault（）; 
 
 $（'＃form'）。fileupload（'send'，{files：uploadable}）; 
}）; 
}）; 
  

HTML

 < form id =formaction =uploadmethod =postenctype =multipart / form-data> 
 <！ - 其他文字/隐藏的输入也将被发送 - > 
< input type =filename =imageid =imageaccept =image / */> 
< input type =filename =videoid =videoaccept =video / */> 
< / form> 
  

解决方案

  uploadable。 push（data.files [0]）
  

你生动地告诉编译器只推送第一个文件。

您是否尝试使用foreach并推送所有文件？

谢谢，

I'm trying to use the blueimp/jQuery-File-Upload plugin to programmatically send more than one file input field though the same form.

When user select form files, it just append them in a JS variable to further send them with $('#form').fileupload('send') method on form submission. My goal is to use the exactly same synchronous form I was using before in an asynchronous way. So when user click on form submit button, it prevents default action and them let the plugin to do the task, sending all form data and displaying overall upload progress.

I'm mainly following these guides:

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

Actually it's almost working, but it does not send more than one input file to the server end. In fileuploadadd event I'm pushing data.files[0] (my file inputs are single file only, but each of them use different accept attributes) to a "global" uploadable array and then on form submission I use something like $('#form').fileupload('send', {files: uploadable}).

I guess I'm not doing it the right way, since only one file is being sent along with form data. What is the correct way to programmatically send more than one file input file using a single form?

I'm also not too confident about overall upload progress... If I use fileuploadprogressall event to read the upload progress will it be reporting the progress of all uploaded 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>

解决方案

uploadable.push(data.files[0])

You vividly told the compiler to only push the first file.
Have you tried using foreach and push all files?

Thank you,

这篇关于以一种形式以编程方式发送多个文件输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！