Forked from optikalefx/Super Simple Ajax File Upload (XHR2).js
Last active
August 29, 2015 14:22
-
-
Save gileswells/23c9bad906671ebcae27 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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(); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
fyfy: