jQuery File Upload在单独的Post Request中发送每个文件?
问题内容:
我的问题既简单又复杂:
我尝试使用带有spring mvc控制器的jQuery
fileUpload库上载文件作为服务器端,但是我的文件每个都被一个请求上载。我想要的是将它们全部发布到一个请求中。
我已经尝试过 singleFileUploads:false 选项,但是它不起作用,如果我通过4个文件上传,则负责处理该帖子的方法称为4次。
我正在使用此表单发布文件:
<div class="upload-file-div">
<b>Choose csv files to load</b> <input id="csvUpload" type="file"
name="files[] "data-url="adminpanel/uploadCsv" multiple />
</div>
<div id="dropzoneCsv">Or drop files here</div>
<div id="progressCsv">
<div class="bar" style="width: 0%;"></div>
</div>
jQuery上传文件的方法:
$('#csvUpload').fileupload(
{
singleFileUploads: false,
dataType : 'json',
done : function(e, data) {
$("tr:has(td)").remove();
$.each(data.result, function(index, file) {
$("#uploaded-csv").append(
$('<tr/>').append(
$('<td/>').text(file.fileName))
.append(
$('<td/>').text(
file.fileSize))
.append(
$('<td/>').text(
file.fileType))
.append(
$('<td/>').text(
file.existsOnServer))
.append($('<td/>')));
});
},
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<FileMeta> uploadCsv(MultipartHttpServletRequest request, HttpServletResponse response) {
// 1. build an iterator
Iterator<String> itr = request.getFileNames();
MultipartFile mpf = null;
List<FileMeta> csvFiles = new ArrayList<FileMeta>();
// 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。对不起,我的英语不好:(
问题答案:
您可能想尝试使用程序化文件上传。该send
方法将确保仅发出一个请求。
基本上保留一个filelist
变量,在每次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问题中所说的那样。