-
-
Save optikalefx/4504947 to your computer and use it in GitHub Desktop.
| // Ajax File upload with jQuery and XHR2 | |
| // Sean Clark http://square-bracket.com | |
| // xhr2 file upload | |
| $.fn.upload = function(remote, data, successFn, progressFn) { | |
| // if we dont have post data, move it along | |
| if (typeof data != "object") { | |
| progressFn = successFn; | |
| successFn = data; | |
| } | |
| var formData = new FormData(); | |
| var numFiles = 0; | |
| this.each(function() { | |
| var i, length = this.files.length; | |
| numFiles += length; | |
| for (i = 0; i < length; i++) { | |
| formData.append(this.name, this.files[i]); | |
| } | |
| }); | |
| // if we have post data too | |
| if (typeof data == "object") { | |
| for (var i in data) { | |
| formData.append(i, data[i]); | |
| } | |
| } | |
| var def = new $.Deferred(); | |
| if (numFiles > 0) { | |
| // do the ajax request | |
| $.ajax({ | |
| url: remote, | |
| type: "POST", | |
| xhr: function() { | |
| myXhr = $.ajaxSettings.xhr(); | |
| if(myXhr.upload && progressFn){ | |
| myXhr.upload.addEventListener("progress", function(prog) { | |
| var value = ~~((prog.loaded / prog.total) * 100); | |
| // if we passed a progress function | |
| if (typeof progressFn === "function") { | |
| progressFn(prog, value); | |
| // if we passed a progress element | |
| } else if (progressFn) { | |
| $(progressFn).val(value); | |
| } | |
| }, false); | |
| } | |
| return myXhr; | |
| }, | |
| data: formData, | |
| dataType: "json", | |
| cache: false, | |
| contentType: false, | |
| processData: false, | |
| complete: function(res) { | |
| var json; | |
| try { | |
| json = JSON.parse(res.responseText); | |
| } catch(e) { | |
| json = res.responseText; | |
| } | |
| if (typeof successFn === "function") successFn(json); | |
| def.resolve(json); | |
| } | |
| }); | |
| } else { | |
| def.reject(); | |
| } | |
| return def.promise(); | |
| }; |
How can i use it for multiple file input element such as name="fupload[]" ?
I would also like to know how to use this script to upload multiple files at once like name = file[].
nice one & + 100 to select multiples files at once but sending them one by one
you should tell us the min. version of jquery that is compatible with , i try it with jquery 1.4.3 it is not working !! however it works with last version of jquery
is there any solution instead of upgrading jquery :)
This handles multiple file fields now.
Thanks, really appreciate this, it works well! Hopefully I will be able to do this myself soon!
May this is an stupid question... but I'm trying to use your js file... adding a reference in my code:
<script src="js/XHR2.js"><script> But it brokes my page, I can't render the existing html... Did I something wrong?
tks for this
Thank you very much. It worked perfectly.
Hello sir, Can I send few more data in file upload along with the image?
Ö
THANK YOU VERY MUCH MAN! you save my day lol.