I'm using jQuery file upload for AJAX-based uploads. It always starts uploading after a file is selected. Is it possible to change the behavior to use the "submit"-button? I am aware of Issue #35, but the Option beforeSend
seems to have been removed.
I am using the Basic Plugin, not the full version.
Maybe I should just switch to plain-XHR-based uploading as suggested there: jQuery Upload Progress and AJAX file upload.
File upload is not possible through AJAX. You can upload file, without refreshing page by using IFrame .
if you have the button
<button id="up_btn">Upload</button>
You can try with
$('#fileupload').fileupload({ dataType: 'json', add: function (e, data) { $("#up_btn").off('click').on('click', function () { data.submit(); }); }, });
EDIT: according to comments a better answer considere off
to avoid duplicated requests. (also work unbind
, I do not check if is bind
and unbind
but jquery team recommend on
and off
link since 1.7)
None of these answers will work for multiple file uploads. My case involved allowing multiple attachments in a comment thread. So I needed to save the comment first to get the id, and then upload and save all the attachments. This seems like a trivial thing, but with this plugin its not that intuitive. My solution uses custom events in jQuery, and works great.
The currently accepted answer binds to the click event of a button in the 'add' callback, but the 'add' callback is called once for each file. If you unbind all the events each time only the last file will upload.
$('#fileupload').fileupload({
dataType: 'json',
add: function (e, data) {
$("#up_btn").on('customName', function (e) {
data.submit();
});
},
});
By binding the submit button to a custom name, we can do whatever preprocessing we want before submitting the images. In my case it involved submitting the comment and getting back the comment id which I did in a separate call. This code just responds to the click, but you can do whatever you want before triggering the event.
$("#up_btn").on('click', function (e) {
e.preventDefault();
$("#up_btn").trigger( "customName");
});
You can pass any data you want when you trigger the event, so it really gives you complete control over your form.
You can also find in jquery.fileupload.js
There is an 'autoUpload' option in line 142.
uploadedBytes: undefined,
// By default, failed (abort or error) file uploads are removed from the
// global progress calculation. Set the following option to false to
// prevent recalculating the global progress data:
recalculateProgress: true,
// Interval in milliseconds to calculate and trigger progress events:
progressInterval: 100,
// Interval in milliseconds to calculate progress bitrate:
bitrateInterval: 500,
// By default, uploads are started automatically when adding files:
autoUpload: true // <<---------- here
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With