Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gileswells/23c9bad906671ebcae27 to your computer and use it in GitHub Desktop.
Save gileswells/23c9bad906671ebcae27 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();
};
@mklickman
Copy link

fyfy:

var doFormSubmit = function(form) {
    $('#FileInputField').upload('/ajax/endpoint',
        {
           id: 1,
           data: 'This is data'
       },
       function(data) {
           if (data.status == 'ok') {
               location.reload();
           } else {
               alert(data.message);
           }
       },
       'json'
    );
};

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