html5異步上傳文件

<!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.οnlοad=function  () {
		  var box=document.getElementById("box");
		  box.οndragenter=function  (e) {
		  e.preventDefault()
		  }
		  box.οndragοver=function  (e) {
		  box.innerHTML="請鬆開"
		   e.preventDefault()
		  }
		  box.οndragleave=function  (e) {
		   box.innerHTML="請拖入上傳的文件"
		  e.preventDefault()
		  }
		  box.οndrοp=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>

發佈了96 篇原創文章 · 獲贊 4 · 訪問量 10萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章