HTML5文件操作+上传+文件拖拽（案例）

本文介绍: readAsDa t aURL(file)获取一个对象路径,读取对象,readAsText(文件,”utf-8″)以某种字符编码读取。on load end 读取文件完成时触发(无论成功与否)onload start 读取文件开始时触发。onpro g res s读取文件过程中触发。onload读取文件成功完成时触发。fileLi st读取多个文件对象。fileRe a de r读取文件信息。onab o rt读取文件中断时触发。reslut获取读取对象的信息。file读取单个文件对象。abort()中断读取。…

js有两种机制：事件 机制、io 机制

文件操作对象：

Blo b 通过二进制原始数据读取

file 读取单个文件对象

fileLi st 读取多个文件对象

fileRe a de r 读取文件信息

file和fileLi st 的属性 方法

1、name 名称

2、size 文件字节长度

3、type 文件类型

4、lastModi fi e d 最后修改日期

获取单个文件:

var file = document.getElem entById(“file”).files[0];

获取多个文件：

var file = document.getElementById(“file”).files;

fileRea de r 属性和方法

readAsBin ar yStr ing(file) 以二进制读取

readAsText(文件,”utf-8″) 以某种字符编码读取

readAsDataURL(file) 获取一个对象路径,读取对象,

abort() 中断读取

reslut 获取读取对象的信息

loaded() 字节数

slice(开始位置，步长) 分段读取方法

fileRea de r 事件

onload start 读取文件开始时触发

onprogress 读取文件过程中触发

onload 读取文件成功完成时触发

onabort 读取文件中断时触发

onlo ad end 读取文件完成时触发 (无论成功与否)

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>