html5异步上传文件

来源:互联网 发布:项目数据库设计 编辑:程序博客网 时间:2024/06/07 05:22
<!DOCTYPE HTML><html><head><style> #box{ width:150px;height:150px;border:1px dashed red; font-size:13px;line-height:150px;text-align:center; }</style><script> window.onload=function  () {  var box=document.getElementById("box");  box.ondragenter=function  (e) {  e.preventDefault()  }  box.ondragover=function  (e) {  box.innerHTML="请松开"   e.preventDefault()  }  box.ondragleave=function  (e) {   box.innerHTML="请拖入上传的文件"  e.preventDefault()  }  box.ondrop=function  (e) {  var file=e.dataTransfer.files[0];//获得上传文件信息  var formData=new FormData();//创建一个表单对象            formData.append("aa",file);//把上传文件数据放入表单对象中,给file取个name用于提交数据。  var xml=new XMLHttpRequest();  xml.open("post","up.php");  xml.send(formData);//ajax提交表单数据           e.preventDefault()  } }</script></head><body>   <div id="box">     请拖入上传的文件   </div></body></html>

0 0
原创粉丝点击