Ajax File upload with jQuery and XHR2Sean Clark http://square-bracket.com

Super Simple Ajax File Upload (XHR2).js

// 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();
};

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

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?

Ö