首页 > 代码库 > html5拖拽事件 xhr2 实现文件上传 含进度条
html5拖拽事件 xhr2 实现文件上传 含进度条
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <script type="text/javascript"> </script> <style type="text/css"> .want { border:2px solid red; } .nowant { border: 1px solid black; } </style></head><body> <div id="fileUpload" class="nowant" style="width: 200px; height: 200px;"></div> <div id="test"></div></body></html><script type="text/javascript"> var isUpload = false; window.onload = function () { var targer = document.getElementById("fileUpload"); //当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上 targer.ondragenter = function (e) { if (isUpload) return;//如果正在上传中 则不允许再放置上传 var types = e.dataTransfer.types;//该属性返回一个DOMStringList对象，该对象包括了存入dataTransfer中数据的所有类型。 if (types && types.some(function(v) { return v === "Files" })) { return false;//阻止浏览器默认操作 } } //拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上 targer.ondragover = function (e) { document.getElementById("fileUpload").classList.remove("nowant"); document.getElementById("fileUpload").classList.add("want"); return false;//阻止浏览器默认操作 } // 在可拖动的元素移出放置目标时执行 JavaScript : targer.ondragleave = function (e) { document.getElementById("fileUpload").classList.remove("want"); document.getElementById("fileUpload").classList.add("nowant"); return false; } //在可拖动元素放置在 <div> 元素中时执行 JavaScript: targer.ondrop = function (e) { if (isUpload) return false;//在上传的途中不允许再上传 console.log(e.dataTransfer);//这样输出是拿不到信息的 var files = e.dataTransfer.files;//获得 放置的文件信息 //这个例子只允许单文件上传哟 if (files && files.length > 0&&files.length==1) { //创建xhr 使用xhr2 进行文件上传 var xhr = new XMLHttpRequest(); xhr.open("POST", "@Url.Action("Upload")");//设置上传方式以及处理请求地址 var body = new FormData();//请求报文体数据存储点 body.append("file",files[0]); //上传进度回调 xhr.upload.onprogress=function(e) { if (e.lengthComputable) { document.getElementById("test").innerHTML = (e.loaded / e.total * 100) + "%"; } } xhr.onload=function(e) { isUpload = false;//上传完成可继续拖拽上传 } xhr.send(body); document.getElementById("fileUpload").classList.remove("want"); document.getElementById("fileUpload").classList.add("nowant"); } return false;//组织浏览器默认操作 } }</script>
html5拖拽事件 xhr2 实现文件上传 含进度条
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。