How to Upload Files Asynchronously With Jquery

Upload operation of file asynchronously using jquery

Unlike you think, the code does NOT use that plugin to upload files. Instead you explicitly make an ajax request. The error occurs because the value of the <input type="file"> is the filename, and that is the only data you are sending in the request.

Instead you need to bind the form using $(form).ajaxform(); then in the click handler, you can trigger the submit event on the form.

Thus something like as follows ought to do the trick:

html:

<form method="post" action="addFile.do">
<input type="file" id="f" name="f"/>
<input id="upload" type="button" value="Upload"/>
</form>

And JavaScript:

$('form').ajaxform({
    success: function () {
        alert("All Files Have Been Uploaded ");
    }
});

$("#upload").click(function() {
    $('form').submit();
});

How to make JQuery file upload plugin call backend only once for all the files in an upload?

Setting SingleFileUploads to false didn't help much with JQuery file uploader since there seems to be a bug as discussed above. So I set that thing back to true.

I separated the inputs into two separate forms - one for text fields input and one for files(which goes through JQuery file uploader). For the text fields form, I kept a visible button the user can click. For the other one, I hid the button. So once the user clicks the visible button, I submit only the text input and create a database record in the backend(this is done using an AJAX call) and in the success field of AJAX call, I .click() the hidden button if the file count is more than 0.

Related Topics