问题
I use the BlueImp plugin to upload my files. A new file input is added dynamicaly by the user when he clicks on "Add a file".
Then, when the user uploads a file it is stored via AJAX in my web folder.
My first idea was to call the fileupload method on the id generated (for example : $('#files_0').fileupload( { //ajax processing } );
But this solution is not working as the input does not exist when the page is loaded.
So I need something like $('#files_0').live('click, function ({ fileupload( { //ajax processing } ) )};
but that's not working also.
So I check the documentation and forums and found that were a solution using the fileInput
option. So here what I've done, but that's not working..Any help would be great !
$('#myDiv').
fileupload(
{
fileInput : $('#files_0),
dataType: 'json',
url:'{{ path('MyBundle_ajax_upload_picture') }}',
progressall: function (e, data)
{
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css(
'width',
progress + '%'
);
},
add: function (e, data)
{
$(this).fileupload('process', data).done(function () {
data.submit();
});
},
done: function (e, data)
{
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
},
always: function (e, data)
{
console.log(data);
}
});
回答1:
Try this:
$('#myDiv').on('change', '#files_0', function (e) {
var $fileupload = $(this);
$fileupload.fileupload({
url: {{ path('MyBundle_ajax_upload_picture') }},
dataType: 'json'
});
$fileupload.fileupload('add', {
fileInput: $(this)
});
});
来源:https://stackoverflow.com/questions/14896468/blueimp-plugin-jquery-file-upload-how-to-use-the-fileinput-option-so-that-file