With HTML5 you can make file uploads with Ajax and jQuery. Not only that, you can do file validations (name, size, and MIME type) or handle the progress event with the HTML5 progress tag (or a div). Recently I had to make a file uploader, but I didn't want to use Flash nor Iframes or plugins and after some research I came up with the solution.
The HTML:
<form enctype="multipart/form-data">
<input name="file" type="file" />
<input type="button" value="Upload" />
</form>
<progress></progress>
First, you can do some validation if you want. For example, in the .on('change')
event of the file:
$(':file').on('change', function () {
var file = this.files[0];
if (file.size > 1024) {
alert('max upload size is 1k');
}
// Also see .name, .type
});
Now the $.ajax()
submit with the button's click:
$(':button').on('click', function () {
$.ajax({
// Your server script to process the upload
url: 'upload.php',
type: 'POST',
// Form data
data: new FormData($('form')[0]),
// Tell jQuery not to process data or worry about content-type
// You *must* include these options!
cache: false,
contentType: false,
processData: false,
// Custom XMLHttpRequest
xhr: function () {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
// For handling the progress of the upload
myXhr.upload.addEventListener('progress', function (e) {
if (e.lengthComputable) {
$('progress').attr({
value: e.loaded,
max: e.total,
});
}
}, false);
}
return myXhr;
}
});
});
As you 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.
File upload is not possible through AJAX.
You can upload file, without refreshing page by using IFrame
.
You can check further details here.
UPDATE
With XHR2, File upload through AJAX is supported. E.g. through FormData
object, but unfortunately it is not supported by all/old browsers.
FormData
support starts from following desktop browsers versions.
- IE 10+
- Firefox 4.0+
- Chrome 7+
- Safari 5+
- Opera 12+
For more detail, see MDN link.
Best Answer
I'm looking for a solution as well. Maybe this will be of some help,
Update: It looks like there are two straightforward options.
I personally hate using 3rd party extensions (Flash, Java) to make an app function, but I haven't found another way.