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.
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?
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});
})
})
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.
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