获取拖动文件js
示例：
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>文件拖动</title>
<style type="text/css">
#dropZone{
border:1px solid #ccc;
width:500px;
height:500px;
}
</style>
</head>
<body>
<div id="dropZone" draggable="true">
可将要上传的文件拖到或粘贴此处
</div>
<script type="text/javascript">
// 获得拖拽文件的回调函数
var dropZone = document.querySelector('#dropZone');
function getDropFileCallBack(dropFiles) {
console.log(dropFiles, dropFiles.length);
}
dropZone.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 df = e.dataTransfer;
var dropFiles = []; // 拖拽的文件，会放到这里
var dealFileCnt = 0; // 读取文件是个异步的过程，需要记录处理了多少个文件了
var allFileLen = df.files.length; // 所有的文件的数量，给非Chrome浏览器使用的变量// 检测是否已经把所有的文件都遍历过了
function checkDropFinish() {
if (dealFileCnt === allFileLen - 1) {
getDropFileCallBack(dropFiles);
}
dealFileCnt++;
}
if (df.items !== undefined) { // Chrome拖拽文件逻辑
for (var i = 0; i < df.items.length; i++) {
var item = df.items[i];
if (item.kind === "file" && item.webkitGetAsEntry().isFile) {
var file = item.getAsFile();
dropFiles.push(file);
console.log(file);
}else{
console.log('不可以上传文件夹');
}
}
} else {
// 非Chrome拖拽文件逻辑
for (var i = 0; i < allFileLen; i++) {
var dropFile = df.files[i];
if (dropFile.type) {
dropFiles.push(dropFile);
checkDropFinish();
} else {
try {
var fileReader = new FileReader();
fileReader.readAsDataURL(dropFile.slice(0, 3));
fileReader.addEventListener('load', function(e) {
console.log('load');
dropFiles.push(dropFile);
checkDropFinish();
}, false);
fileReader.addEventListener('error', function(e) {
console.log('不可以上传文件夹');
checkDropFinish();
}, false);
} catch (e) {
console.log('不可以上传文件夹');
checkDropFinish();
}
}
}
}
}, false);
</script>
</body>
</html>封装成函数
//拖动文件
//callBack 回调方法
//id 元素id值
dropFile = function(callBack,id){
var dropZone = document.querySelector(id);
dropZone.addEventListener("dragenter", function (e) {e.preventDefault();e.stopPropagation();}, false);
dropZone.addEventListener("dragover", function (e) {e.preventDefault();e.stopPropagation(); $(id).addClass('on');}, false);
dropZone.addEventListener("dragleave", function (e) {e.preventDefault();e.stopPropagation(); }, false);
dropZone.addEventListener("drop", function(e) {
e.preventDefault();
e.stopPropagation();
var df = e.dataTransfer||e.target;
var dropFiles = []; // 拖拽的文件，会放到这里
var dealFileCnt = 0; // 读取文件是个异步的过程，需要记录处理了多少个文件了
var allFileLen = df.files.length; // 所有的文件的数量，给非Chrome浏览器使用的变量// 检测是否已经把所有的文件都遍历过了
function checkDropFinish() {
if (dealFileCnt === allFileLen - 1) {
callBack(dropFiles,true,'');
}
dealFileCnt++;
}
if (df.items !== undefined) { // Chrome拖拽文件逻辑
for (var i = 0; i < df.items.length; i++) {
var item = df.items[i];
if (item.kind === "file" && item.webkitGetAsEntry().isFile) {
var file = item.getAsFile();
dropFiles.push(file);
checkDropFinish();
//console.log(file);
}else{
callBack(dropFiles,false,'不支持上传文件夹');
console.log('不支持上传文件夹');
}
}
} else {
// 非Chrome拖拽文件逻辑
for (var i = 0; i < allFileLen; i++) {
var dropFile = df.files[i];
if (dropFile.type) {
dropFiles.push(dropFile);
checkDropFinish();
} else {
try {
var fileReader = new FileReader();
fileReader.readAsDataURL(dropFile.slice(0, 3));
fileReader.addEventListener('load', function(e) {
console.log('load');
dropFiles.push(dropFile);
checkDropFinish();
}, false);
fileReader.addEventListener('error', function(e) {
callBack(dropFiles,false,'不支持上传文件夹');
checkDropFinish();
}, false);
} catch (e) {
callBack(dropFiles,false,'不支持上传文件夹');
checkDropFinish();
}
}
}
}
}, false);
}