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()中断读取。…

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

file 读取单个文件对象

fileLi st 读取多个文件对象

fileRe a de r 读取文件信息

1、name 名称

2、size 文件字节长度

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>