在html表中填充上传的文件名和大小，在用户第二次选择文件时附加新值

问题是我有一个表，我想在用户点击选择文件按钮并选择任意数量的文件后填充文件名和文件大小的值，现在问题是如果用户单击选择文件按钮第二次我想要追加表中的新值，并在数组中添加新文件，以便它可以上传..我的代码是，

html表单代码：

 
 
 
 
Simple Upload
 
 
 
 
  
Image uploaded successfully
 
Image not successfully uploaded
 
Issue while uploading try again
 
 
 
 
 
 
 
 
 
 
 
Title
 
Size
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
    
 
  

javascript代码：

  var totalsizeOfUploadFiles = 0; function getFileSizeandName(input) { var select = $('#uploadTable tbody'); $('#renameFile').empty();$('#removeFile').empty(); if(input.files.length > 0) { $('#renameFile').append($('Rename Selected')); $('#removeFile').append($('Remove Selected')); $('#startButton').removeAttr("disabled", "disabled"); $('#clearButton').removeAttr("disabled", "disabled"); } //if(input.files.length <= 5) //{ for(var i =0; i<input.files.length; i++) { var filesizeInBytes = input.files[i].size; var filesizeInMB = (filesizeInBytes / (1024*1024)).toFixed(2); var filename = input.files[i].name; //alert("File name is : "+filename+" || size : "+filesizeInMB+" MB || size : "+filesizeInBytes+" Bytes"); if(i4) select.append($(''+filename+''+filesizeInMB+'')); totalsizeOfUploadFiles += parseFloat(filesizeInMB); $('#totalsize').text(totalsizeOfUploadFiles.toFixed(2)+" MB"); if(i==0) $('#filecount').text("1file"); else { var no = parseInt(i) + 1; $('#filecount').text(no+"files"); } } //} } function CloseAndRefresh() { var daa = ''; if(daa == "true") $('#successdiv').show(); else if(daa == "false") $('#errordiv').show(); else $('#streamdiv').show(); opener.location.reload(true); self.close(); } function Clear() { $('#uploadTable tbody tr td').each(function(){ $(this).text(""); }); $('#uploadTable tfoot tr td').each(function(){ $(this).text(""); }); } 

我想这样做http://www.shutterfly.com/图片上传。

任何帮助将不胜感激，谢谢各位朋友……

Answer 1

您正在使用javascript导航，单击提交按钮时functionCloseAndRefresh 。

实际发生的是，在使用不同线程几乎同时执行CloseAndRefresh函数时正在提交上载请求。 如果上传请求不够快，网页将首先刷新，您的上传请求会立即终止。 使用现有代码没有简单的方法来阻止这种情况。

你应该使用像jQuery上传插件这样的高级上传方法来发送请求。 该插件提供了一个绑定器，用于在成功/失败的提交时执行function。

Answer 2

谢谢gigadot，我解决了下面的问题，

html表单与之前发布的代码相同，在之前的js代码中我有CloseAndRefresh()方法我现在从js以及提交按钮onclick事件中删除它。

当表单动作调用控制器时，我有代码

 @RequestMapping(value = "/upload", method = RequestMethod.POST) public String UploadReceipts(@RequestParam("files[]") List file, Model model) throws IOException { boolean status = false; try { for(int i=0; i< file.size(); i++) { if(!file.get(i).isEmpty()) { CommonsMultipartFile cm = (CommonsMultipartFile) file.get(i); status = simpleUploadService.uploadFileandSave(cm); model.addAttribute("status", status); } } } catch (IOException e) { status = false; model.addAttribute("status", status); } return "pages/simpleUploadStatus"; } 

现在我将其重定向到另一个页面，在该页面中，我为用户抛出了相应的消息。 就这样...