js拖拽文件实现进度条
最近遇到个需求,浏览器拖拽功能,并且实现显示进度条
拖拽盒子省略了,自定义就行
// 禁止浏览器的默认拖拽打开文件的事件 ,dropZone 拖拽区域盒子
var dropEle = document.querySelector('#dropZone');
dropEle.addEventListener('drop', function (e) {
//
}, false);
document.addEventListener('drop', function (e) {
//
}, false);
dropEle.addEventListener("dragenter", function (e) {
e.preventDefault();
e.stopPropagation();
}, false);
dropZone.addEventListener("dragover", function (e) {
e.preventDefault();
e.stopPropagation();
}, false);
dropZone.addEventListener("dragleave", function (e) {
e.preventDefault();
e.stopPropagation();
}, false);
dropZone.addEventListener("drop", function (e) {
e.preventDefault();
e.stopPropagation();
// 拖拽进入的事件
var files = e.dataTransfer.files
var filesName = files[0].name;
var extStart = filesName.lastIndexOf(".");
var ext = filesName.substring(extStart,filesName.length).toUpperCase();
$('#filename').html(filesName)
// 文件拖拽进入触发test事件
test(files);
i++;
}
// 进度条出现
$("#example1").show();
})
function test(a) {
var formData = new FormData()
formData.append("fileName", a[0]);
$.ajax({
url: "***",
type: "POST",
data: formData,
dataType: "JSON",
cache: false,
processData: false,
contentType: false,
xhr: function () {
var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
xhr.upload.onprogress = function (progress) {
if (progress.lengthComputable) {
let str = progress.loaded / progress.total * 100
// 此处获取到了上传进度百分比str。就可以做css操作了
if(str == 100 ){
$("#example1").hide();
}
}
};
xhr.upload.onloadstart = function () {
console.log('开始');
};
}
// 一定记得要return xhr 不然后面就没有xhr用了
return xhr;
},
success:function(val){
// 此处做判断语句
}
})
};
```