js有两种机制：事件机制、io机制
文件操作对象：
Blob 通过二进制原始数据读取
file 读取单个文件对象
fileList 读取多个文件对象
fileReader 读取文件信息
file和fileList 的属性方法
1、name 名称
2、size 文件字节长度
3、type 文件类型
4、lastModified 最后修改日期
获取单个文件:
<input type="file" name="" id="file" >
var file = document.getElementById("file").files[0];
获取多个文件：
<input type="file" name="" id="file" multiple>
var file = document.getElementById("file").files;
fileReader属性和方法
readAsBinaryString(file) 以二进制读取
readAsText(文件,"utf-8") 以某种字符编码读取
readAsDataURL(file) 获取一个对象路径,读取对象,
abort() 中断读取
reslut 获取读取对象的信息
loaded() 字节数
slice(开始位置，步长) 分段读取方法
fileReader事件
onloadstart 读取文件开始时触发
onprogress 读取文件过程中触发
onload 读取文件成功完成时触发
onabort 读取文件中断时触发
onloadend 读取文件完成时触发 (无论成功与否)
onerror 获取错误事件信息
文件拖拽
如果要实现文件拖拽，必须在标签里设置拖拽属性 draggable = true
例如 ： <div draggable></div>
拖拽事件
ondragstart：鼠标悬停到被拖拽元素上，开始触发;
ondragEnter：拖拽元素进入目标元素，开始触发;
ondragover：拖拽元素在目标元素上移动时触发;
ondrop：拖拽元素进入目标元素，并且鼠标松开时触发;
ondragend：拖拽完成时触发
属性和方法
#### getData() 获取数据
#### setData(类型，内容) 设置数据
#### preventDefault() 启动元素放置事件
#### dropEffect() 被拖动元素的权限设置
none 不能放置在目标元素上
move 可以在目标元素上移动
copy 拖拽元素允许被复制到目标元素里
link 可以获得拖拽元素地址
#### effectAllowed() 允许拖动的效果
none 不允许有任何行为
copy 只允许复制
move 只允许移动
link 只允许打开链接
copylink 复制和打开链接
copymove 复制和移动
linkmove 移动和打开链接
all 所有都允许
操作案例：
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
border: 1px solid black;
margin: 20px;
}
#file{
margin: 30px;
}
.container{
display: flex;
border: none;
}
#show,#del{
width: 300px;
height: 200px;
display: flex;
flex-direction: column;
text-align: center;
}
#show img{
margin-left: 50px;
width: 200px;
height: 100px;
}
#box{
width: 800px;
height: 400px;
}
#box img{
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<input type="file" id="file" />
<button id="btn" onclick="fun()">上传</button>
<div class="container">
<div id="show"><h4>显示上传图片</h4></div>
<div id="del"><h4>垃圾桶</h4></div></div>
</container>
<div id="box"></div>
<script>
function fun() {
show().then((value)=>{
drag(value);
})
}
function show(){
return new Promise(resolve => {
var file = document.getElementById("file").files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
var img = new Image();
img.src = this.result;
img.setAttribute("id","img")
img.setAttribute("draggable","true")
document.getElementById("show").appendChild(img);
resolve(img);
}
})
}
function drag(img){
return new Promise(resolve => {
var box = document.getElementById("box");
var del = document.getElementById("del");
img.ondragstart = function (e) {
e.dataTransfer.setData("id", e.target.id);
e.dataTransfer.dropEffect = "copy";
};
box.ondragover = function (e) {
e.preventDefault(); //允许其他元素放置
};
box.ondrop = function (e) {
e.dataTransfer.effectAllowed = "all"
var id = e.dataTransfer.getData("id");
var img = document.getElementById(id);
e.target.appendChild(img);
};
del.ondragover = function (e) {
e.preventDefault();
};
del.ondrop = function (e) {
e.dataTransfer.effectAllowed = "all"
var id = e.dataTransfer.getData("id");
var img = document.getElementById(id);
var box = document.getElementById("box");
box.removeChild(img);
}
resolve();
})
}
</script>
</body>
</html>
参考文章：http://blog.ncmem.com/wordpress/2023/12/15/html5%e6%96%87%e4%bb%b6%e6%93%8d%e4%bd%9c%e4%b8%8a%e4%bc%a0%e6%96%87%e4%bb%b6%e6%8b%96%e6%8b%bd%ef%bc%88%e6%a1%88%e4%be%8b%ef%bc%89/
欢迎入群一起讨论
