How to upload a file asynchronously with jQuery ?
- With HTML5 we can make file uploads with Ajax and jQuery. Not only that, we can do file validations (name, size, and MIME type) or handle the progress event with the HTML5 progress tag (or a div). Recently We had to make a file uploader, but we didn't want to use Flash nor Iframes or plugins and after some research we came up with the solution.
- The HTML:
First, we can do some validation if we want. For example, in the onChange event of the file:
Now the Ajax submit with the button's click:
- As we can see, with HTML5 (and some research) file uploading not only becomes possible but super easy. Try it with Google Chrome as some of the HTML5 components of the examples aren't available in every browser.
- There are various ready-made plugins on doing file upload for jQuery.
- Doing this kind of uploading hacks is not an enjoyable experience, so people enjoy using ready-made solutions.
- Multiple File Upload Plugin
We can search for more projects on NPM (using "jquery-plugin" as the keyword) or on Github.
This AJAX file upload jQuery plugin uploads the file somehwere, and passes the response to a callback, nothing else.
- It does not depend on specific HTML, just give it a <input type="file">
- It does not require your server to respond in any particular way
- It does not matter how many files we use, or where they are on the page
-- Use as little as --
-- or as much as --