HTML5结合ajax实现文件上传以及进度显示-CSDN博客

html代码：

<input type="file" name="file" id="abc" class="aaa" οnchange="showPreview(this)" />
<img id="portrait" src="" width="70" height="75">

js代码：

function showPreview(source) {
	var file = source.files[0];
	console.log(file);
	if(window.FileReader) {
		var fr = new FileReader();
		fr.onloadend = function(e) {
		
			document.getElementById("portrait").src = e.target.result;
		};
		fr.readAsDataURL(file);
		
	}
	
	var myForm = new FormData();

	myForm.append("name", "张三");
	//myForm.append("userfile", document.getElementById('abc').files[0]);这样也可以
	myForm.append("file", file);
	 
	$.ajax({
	  type:'POST',
	  processData:false,
	  contentType:false,
	  url:'get.php',
	  xhr: xhr_provider,
	  data:myForm
	});
}

function on_progress(evt) {
	 if (evt.lengthComputable) {
		  var percentComplete = Math.round(evt.loaded * 100 / evt.total);
		  document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
		}
		else {
		  document.getElementById('progressNumber').innerHTML = 'unable to compute';
		}
};
var xhr_provider = function() {
	var xhr = jQuery.ajaxSettings.xhr();
	if(on_progress && xhr.upload) {
		xhr.upload.addEventListener('progress', on_progress, false);
	}
	return xhr;
};

参考链接：

http://www.hello-code.com/blog/html5/201403/2913.html

http://www.cnblogs.com/idche/archive/2011/05/16/2047758.html

https://developer.mozilla.org/zh-CN/docs/Web/API/FormData#append()

http://www.cnblogs.com/lhb25/p/html5-formdata-tutorials.html

http://www.matlus.com/html5-file-upload-with-progress/

http://www.cnblogs.com/wintersun/archive/2012/08/30/2663408.html

http://david6116.blog.163.com/blog/static/13385556320125481143139/

http://blog.csdn.net/dazhi_100/article/details/20068383

http://keshion.iteye.com/blog/1171445

http://blog.csdn.net/yaoyuan_difang/article/details/38582697