JQuery文件上传在每个Post Request中发送每个文件？

我的问题同时简单而复杂：

我尝试使用带有spring mvc控制器作为服务器端的jQuery fileUpload库上传文件，但我的文件每个都上传一个请求。 我想要的是在一个请求中发布所有内容。

我已经尝试过singleFileUploads：false选项但是它不起作用，如果我传递4个文件上传，负责处理post的方法被调用4次。

我用这个表格发布文件：

 Choose csv files to load  
 
Or drop files here
 
 
  

上传文件的Jquery方法：

 $('#csvUpload').fileupload( { singleFileUploads: false, dataType : 'json', done : function(e, data) { $("tr:has(td)").remove(); $.each(data.result, function(index, file) { $("#uploaded-csv").append( $('').append( $('').text(file.fileName)) .append( $('').text( file.fileSize)) .append( $('').text( file.fileType)) .append( $('').text( file.existsOnServer)) .append($(''))); }); }, progressall : function(e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $('#progressCsv .bar').css('width', progress + '%'); }, dropZone : $('#dropzoneCsv') }); 

和处理程序方法：

 @RequestMapping(value = "/adminpanel/uploadCsv", method = RequestMethod.POST) public @ResponseBody List uploadCsv(MultipartHttpServletRequest request, HttpServletResponse response) { // 1. build an iterator Iterator itr = request.getFileNames(); MultipartFile mpf = null; List csvFiles = new ArrayList(); // 2. get each file while (itr.hasNext()) { // 2.1 get next MultipartFile mpf = request.getFile(itr.next()); System.out.println(mpf.getOriginalFilename() + " uploaded! "); // 2.3 create new fileMeta FileMeta fileMeta = new FileMeta(); fileMeta.setFileName(mpf.getOriginalFilename()); fileMeta.setFileSize(mpf.getSize() / 1024 + " Kb"); fileMeta.setFileType(mpf.getContentType()); try { File dir = new File(Thread.currentThread().getContextClassLoader() .getResource("").getPath()+"CSV"); if(!dir.exists()) dir.mkdirs(); File newCSV = new File(dir+"\\"+ mpf.getOriginalFilename()); if(!newCSV.exists()) { mpf.transferTo(newCSV); fileMeta.setExistsOnServer(false); } else fileMeta.setExistsOnServer(true); } catch (IllegalStateException e1) { // TODO Auto-generated catch block e1.printStackTrace(); } catch (IOException e1) { // TODO Auto-generated catch block e1.printStackTrace(); } // 2.4 add to files csvFiles.add(fileMeta); } return csvFiles; } 

我真的需要一个帮助:(文件应该在一个请求中加载，这就是为什么我做迭代器，但它只是不工作。

PS。 对不起我可怕的英语:(

Answer 1

您可能希望尝试编译程序文件 。 send方法将确保只发出一个请求。

基本上保留一个filelist变量，每次发生fileuploadadd回调时fileuploadadd更新它，然后将此filelist用于send方法。

例如：

 $document.ready(function(){ var filelist = []; $('#form').fileupload({ ... // your fileupload options }).on("fileuploadadd", function(e, data){ for(var i = 0; i < data.files.length; i++){ filelist.push(data.files[i]) } }) $('#button').click(function(){ $('#form').fileupload('send', {files:filelist}); }) }) 

它受到这个问题的启发。

我发现它有用的原因是即使你将singleFileUploads设置为false ，如果你做多个单独的选择，它们仍然会被发送每个单独的请求，正如作者在这个GitHub问题中所说的那样