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 class="nowant" ></div> <div ></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>
主要实现步骤是利用html 几个拖拽事件
1.当文件拖动到容器时候 容器增加边框高亮样式
2.当文件拖出边框的时候 删除边框高亮样式
3.当文件放置在容器的时候 通过事件参数 获得 放置的文件信息
4.使用html5 的formdata 对象 将文件信息添加进去
5.使用XHR2 将formdata 发送到服务器处理(在此之前 同事使用xhr2 注册 上传进度回调)
- 上一篇 »HTML5 拖放
- 下一篇 »HTML5 FormData 方法介绍以及实现文件上传
