利用FormData实现附件上传(两种方式)
- var reg=document.getElementById(’reg’);
- var fd = new FormData(reg);
- send(fd); // fd里边有普通表单信息和附件信息
第二种方式
- var mypic = document.getElementById(’myhead’).files[0];//获取file表单的文件对象
- fd.append(’myhead’,mypic);
- 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="" width="200" height="150"/><br /> <input type="button" value="上传头像" onclick="f1()" /><br />
ajax实现附件上传
时间: 2024-11-06 03:36:59