<script type="text/javascript"> function creatXMLHttpRequest(){ var obj =null; if(window.ActiveObject){ obj = new ActiveObject("Microsoft.XMLHTTP"); }else{ obj = new XMLHttpRequest(); } return obj; } window.onload=function(){ fileinfo=document.getElementById('myheads').files[0]; } function uploaded(){ var xhr = creatXMLHttpRequest(); var fd = new FormData(); fd.append('myheads',fileinfo); xhr.onreadystatechange=function(){ if(xhr.readyState==4 && xhr.status ==200){ alert(xhr.responseText); } } xhr.open('post','jsonupload.php'); xhr.send(fd); } </script> <input type="file" id='myheads' name="myhead" value="wenjian"/> <input type="button" value="上传" onclick="uploaded();"/> </body>
上图为fileinfo的内容javascript
window.onload=function(){ fileinfo=document.getElementById('myheads').files[0]; // console.log(fileinfo); } function uploaded(){ var xhr = creatXMLHttpRequest(); var fd = new FormData(); fd.append('myheads',fileinfo); document.getElementById('img').src=window.URL.createObjectURL(fileinfo); xhr.onreadystatechange=function(){ if(xhr.readyState==4 && xhr.status ==200){ alert(xhr.responseText); } } xhr.open('post','jsonupload.php'); xhr.send(fd); }
总结:HTML5新特性FormDataphp
能够经过:java
fileinfo=document.getElementById('myheads').files[0];来捕获客户端上传文件的信息json
将须要上传的文件信息载入到FormData对象内部app
fd.append('finfo',fileinfo);
post
而后经过 window.URL.createObjectURL(fileinfo);文件的url地址信息,二进制编码存在编码