html5拖拽事件 xhr2 实现文件上传 含进度条

时间:2021-08-01 23:46:13
<!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 > &&files.length==) {
//创建xhr 使用xhr2 进行文件上传
var xhr = new XMLHttpRequest();
xhr.open("POST", "@Url.Action("Upload")");//设置上传方式以及处理请求地址
var body = new FormData();//请求报文体数据存储点 body.append("file",files[]);
//上传进度回调
xhr.upload.onprogress=function(e) { if (e.lengthComputable) {
document.getElementById("test").innerHTML = (e.loaded / e.total * ) + "%";
} }
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 注册 上传进度回调)