Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Ajax File upload with jQuery and XHR2Sean Clark http://square-bracket.com
// 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();
};
@asakapab0i

This comment has been minimized.

Copy link

asakapab0i commented Sep 13, 2013

THANK YOU VERY MUCH MAN! you save my day lol.

@klynix

This comment has been minimized.

Copy link

klynix commented Oct 16, 2013

How can i use it for multiple file input element such as name="fupload[]" ?

@KevinSleegers

This comment has been minimized.

Copy link

KevinSleegers commented Jan 28, 2014

I would also like to know how to use this script to upload multiple files at once like name = file[].

@rizerzero

This comment has been minimized.

Copy link

rizerzero commented Jul 24, 2014

nice one & + 100 to select multiples files at once but sending them one by one

@ahmdelemam

This comment has been minimized.

Copy link

ahmdelemam commented Oct 1, 2014

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 :)

@optikalefx

This comment has been minimized.

Copy link
Owner Author

optikalefx commented May 18, 2015

This handles multiple file fields now.

@Matthcw

This comment has been minimized.

Copy link

Matthcw commented Aug 31, 2015

Thanks, really appreciate this, it works well! Hopefully I will be able to do this myself soon!

@jlagr

This comment has been minimized.

Copy link

jlagr commented Jun 19, 2016

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?
@nguyentrungthinh2000

This comment has been minimized.

Copy link

nguyentrungthinh2000 commented Jul 17, 2017

tks for this

@Utshab500

This comment has been minimized.

Copy link

Utshab500 commented Dec 29, 2017

Thank you very much. It worked perfectly.

@Utshab500

This comment has been minimized.

Copy link

Utshab500 commented Jan 1, 2018

Hello sir, Can I send few more data in file upload along with the image?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.