Skip to content

Instantly share code, notes, and snippets.

@optikalefx
Last active April 4, 2021 15:12
Show Gist options
  • Save optikalefx/4504947 to your computer and use it in GitHub Desktop.
Save optikalefx/4504947 to your computer and use it in GitHub Desktop.
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
Copy link

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

@klynix
Copy link

klynix commented Oct 16, 2013

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

@KevinSleegers
Copy link

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

@rizerzero
Copy link

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

@ahmdelemam
Copy link

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
Copy link
Author

This handles multiple file fields now.

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

@jungtin
Copy link

jungtin commented Jul 17, 2017

tks for this

@Utshab500
Copy link

Thank you very much. It worked perfectly.

@Utshab500
Copy link

Utshab500 commented Jan 1, 2018

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

@YitzakD
Copy link

YitzakD commented Apr 30, 2020

Ö

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment