首页 > 代码库 > ajax实现附件上传

ajax实现附件上传

2024-07-12 13:33:23   223人阅读

利用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 = http://www.mamicode.com/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 = http://www.mamicode.com/window.URL.createObjectURL(mypic);"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=""  width="200" height="150"/><br />	<input type="button" value="http://www.mamicode.com/上传头像" onclick="f1()" /><br />

　　


联系
我们