通过blueimp jquery-fileupload异步上传多个文件 [英] Uploading multiple files asynchronously by blueimp jquery-fileupload

问题描述

我正在使用jQuery文件上传库（ http://github.com/blueimp/jQuery - 文件上传），我一直在弄清楚如何使用满足以下条件的库。

• 该页面有多个文件输入字段，由表单标记包围。
  
• 用户可以将多个文件附加到每个输入字段
  
• 所有文件都发送到服务器，而不是当文件附加到输入字段。
  
• 上传是异步完成的


• 假设页面有3个输入字段其名称属性为file1 []，file2 []和file3 []，请求负载应该类似于{file1：[file1 []]上的文件数组，file2：[file2上的文件数组...]
  
  
  

  这里是jsFiddle，它的行为很奇怪，因为它发送两次发送请求和第一个已被取消。

  
  
  

  更新

  
  
  

  现在感谢@CBroe的评论，请求发送两次的问题是固定的。但是请求参数的键没有正确设置。
  这里更新了jsFiddle。
  
  

  http://jsfiddle.net/BAQtG/27 /

  
  
  

  ---

  
  
  

  js代码的核心部分如下所示。

    $（document）.ready（function（）{
   var filesList = [] 
   var elem = $（form）
   file_upload = elem.fileupload（{
   formData：{extra：1}，
   autoUpload：false，$ b $ fileInput：$（input：file），
  }） .on（fileuploadadd，function（e，data）{
   filesList.push（data.files [0]）
  }）; 
   
   $（button） .click（function（）{
   file_upload.fileupload（'send'，{files：filesList}）
  }）
   
  }）
    
  解决方案
   
          > http://jsfiddle.net/BAQtG/29/   
   
   和js代码 
   
   <$ （$）$（$）$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ ）; 
   file_upload = elem.fileupload（{
   formData：{extra：1}，
   autoUpload：false，
   fileInput：$（input：file），
   （fileuploadadd，function（e，data）{
   filesList.push（data.files [0]）; 
   paramNames.push（e.delegatedEvent.target.name）; 
  }）;点击（功能（e）{
   e.preventDefault（）; 
   file_upload.fileupload（'send'，{files：filesList，paramName ：paramNames}）; 
  }）
  }）
    

  
  

  I'm using jQuery File Upload library (http://github.com/blueimp/jQuery-File-Upload), and I've been stuck figuring out how to use the library satisfying the following conditions.

  • The page has multiple file input fields surrounded by a form tag.
  • Users can attach multiple files to each input field
  • All files are sent to a server when the button is clicked, not when files are attached to the input fields.
  • Upload is done asynchronously
  • Say the page has 3 input fields with their name attributes being "file1[]", "file2[]" and "file3[]", the request payload should be like {file1: [ array of files on file1[] ], file2: [ array of files on file2[] ], ...}

  Here's jsFiddle, it's behaving weird so far in that it sends post request twice and the first one is cancelled.

  Updates

  Now thanks to @CBroe 's comment, the issue that request is sent twice is fixed. However the keys of request parameter is not correctly set. Here's updated jsFiddle.

  http://jsfiddle.net/BAQtG/27/

  ---

  The core part of js code looks like this.

  $(document).ready(function(){
      var filesList = []
      var elem = $("form")
      file_upload = elem.fileupload({
          formData:{extra:1},
          autoUpload: false,
          fileInput: $("input:file"),
      }).on("fileuploadadd", function(e, data){
          filesList.push(data.files[0])
      });
  
      $("button").click(function(){
          file_upload.fileupload('send', {files:filesList} )
      })
  
  })
  

  Anybody have idea how to get this to work?

  解决方案

  Solved.

  Fiddle: http://jsfiddle.net/BAQtG/29/

  And js code

  $(document).ready(function(){
      var filesList = [],
          paramNames = [],
          elem = $("form");
      file_upload = elem.fileupload({
          formData:{extra:1},
          autoUpload: false,
          fileInput: $("input:file"),
      }).on("fileuploadadd", function(e, data){
          filesList.push(data.files[0]);
          paramNames.push(e.delegatedEvent.target.name);
      });
  
      $("button").click(function(e){
          e.preventDefault();
          file_upload.fileupload('send', {files:filesList, paramName: paramNames});
      })
  })
  

  这篇关于通过blueimp jquery-fileupload异步上传多个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！