Friday, 15 April 2011

BlueImp Plugin jQuery File Upload : How to use the fileInput option so that fileupload() can bind new dynamically added inputs? -



BlueImp Plugin jQuery File Upload : How to use the fileInput option so that fileupload() can bind new dynamically added inputs? -

i utilize blueimp plugin upload files. new file input added dynamicaly user when clicks on "add file". then, when user uploads file stored via ajax in web folder.

my first thought phone call fileupload method on id generated (for illustration : $('#files_0').fileupload( { //ajax processing } ); solution not working input not exist when page loaded. so need $('#files_0').live('click, function ({ fileupload( { //ajax processing } ) )}; that's not working also. check documentation , forums , found solution using fileinput option. here i've done, that's not working..any help 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); } });

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

jquery file-upload blueimp

No comments:

Post a Comment