html5异步上传文件

最新推荐文章于 2024-04-26 21:29:15 发布

不是我的货

最新推荐文章于 2024-04-26 21:29:15 发布

阅读量290

点赞数

分类专栏： html5 文章标签： html5

html5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!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>

优惠劵

不是我的货

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5异步上传文件

#box{ width:150px;height:150px;border:1px dashed red; font-size:13px;line-height:150px;text-align:center; } window.onload=function () { var box=document.getElementById("box");
复制链接

扫一扫