问题
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?
回答1:
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});
})
})
回答2:
The first POST request triggered by your script gets canceled, because the button submits the form (causing the second POST request).
Use type="button"
on the button
if you don’t want it to have submit functionality.
回答3:
You have to either add a return false;
, as shown below:
$("button").click(function(){
file_upload.fileupload('send', {files:filesList} )
return false;
})
or specify the type="button"
attribute:
<button type="button">send by fileupload send api</button>
In order to set the formData
, use the following:
$("button").click(function () {
file_upload.fileupload('send', {
files: filesList,
formData: {
json: JSON.encode({
extra: 1
})
}
})
})
Specifically for JSFiddle, if you want to get the extra
value in the response, you have to encode it and assign it to a property named json
.
Here's a working example.
来源:https://stackoverflow.com/questions/19807361/uploading-multiple-files-asynchronously-by-blueimp-jquery-fileupload