更新时间:2022-10-30 08:29:02
您可能要尝试程序化文件上传。 send
方法将确保只发出一个请求。
基本上保存一个 filelist
变量,每更新一次 fileuploadadd
callback,然后使用 filelist
用于 send
方法。 例如:
$ document.ready(function(){
$ $ b $
var filelist = [];
$('#form') 。(fileuploadadd,function(e,data){
for(va).fileupload({
... // your fileupload options
) r i = 0; i filelist.push(data.files [i])
}
})
$('#button' {
$('#form')。fileupload('send',{files:filelist});
})
})它的灵感来自于这个问题。
我发现它很有用的原因是即使您设置
singleFileUploads
为false code>,如果你做了多个单独的选择,他们仍然会被发送每个请求,如作者自己在此GitHub问题
My problem is simple and complex same time:
Im tryin to upload files using jQuery fileUpload library with spring mvc controller as server side, but my files are being uploaded by one request each. What i want is posting them ALL in ONE request.
I have tried singleFileUploads: false option but its not working, if i pass 4 files to upload, the method responsible for handling the post is called 4 times.
Im using this form to post files:
<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 method to upload files:
$('#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') });
And handler method :
@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; }
I would really need an assistance here :( Files should be loaded in one request, thats why im doing the iterator, but its just not working.
ps. Sorry for my terrible english :(
You may want to try Programmatic file upload instead. The
send
method will ensure only one request is issued.Basically keep a
filelist
variable, update it everytimefileuploadadd
callback happens, then use thisfilelist
for thesend
method.For example:
$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}); }) })
It is inspired by this question.
The reason I found it useful is even if you set
singleFileUploads
tofalse
, if you do multiple individual selections, they will still be sent with individual requests each, as the author said himself in this GitHub issue