ajax实现附件上传

利用FormData实现附件上传(两种方式)

1. var  reg=document.getElementById(’reg’);
2. var fd = new FormData(reg);
3. send(fd);   // fd里边有普通表单信息和附件信息

第二种方式

1. var mypic = document.getElementById(’myhead’).files[0];//获取file表单的文件对象
2. fd.append(’myhead’,mypic);
3. send(fd);

html5新标准，获取附件信息files，我们可以利用files获取图片的二进制信息，实现选择图片文件后立即在页面显示缩略图：

　　var mypic = document.getElementById(’myhead’).files[0];

　　document.images[0].src = window.URL.createObjectURL(mypic);//获取image对象，将其src属性更改为选择的图片的二进制信息

 

选择文件页面立即显示缩略图，显示上传进度：

<script type="text/javascript">

	function f1(){

		var mypic = document.getElementById('myhead').files[0];

		//抓取页面的附件信息，实现上传
		var fd = new FormData();
		fd.append("myhead",mypic);

		var xhr = new XMLHttpRequest();

		xhr.onreadystatechange = function(){
			if(xhr.readyState==4 && xhr.status==200){
				alert(xhr.responseText);
			}
		}

		//侦查当前附件上传情况，用来处理上传进度，显示进度条
		xhr.upload.onprogress = function(evt){
			//侦查附件上传情况
			//通过事件对象侦查
			//该匿名函数表达式大概0.05-0.1秒执行一次
			//console.log(evt);
			//console.log(evt.loaded);  //已经上传大小情况
			//evt.total; 附件总大小
			var loaded = evt.loaded;
			var tot = evt.total;
			var per = Math.floor(100*loaded/tot);  //已经上传的百分比
			var son =  document.getElementById('son');
			son.innerHTML = per+"%";
			son.style.width=per+"%";
		}

		xhr.open("post","./04.php");
		xhr.send(fd);
	}

	//立刻显示被上传的图片
	function f2(){
		//利用files获得被上传附件(图片)信息
		var mypic = document.getElementById('myhead').files[0];
		//利用mypic获得图像的url地址(二进制源码)
		//URL  html5新标准属性
		//window.URL.createObjectURL(mypic);
		document.getElementsByTagName('img')[0].src = window.URL.createObjectURL(mypic);
	}
</script>
<style type="text/css">
    #parent{width:550px; height:50px; border:5px solid blue;}
    #son {width:0; height:100%; background-color:lightblue; text-align:center; line-height:50px; font-size:20px; font-weight:bold;}
</style>

	<div id="parent"><div id="son"></div></div><!--用来显示上传进度条-->
	用户头像：<input type="file" id="myhead" name="myhead" onchange="f2()"/><br />
	<img src="" alt="" width="200" height="150"/><br />
	<input type="button" value="上传头像" onclick="f1()" /><br />