HTML5拖拽文件上传

淩亂°似流年 2023-01-01 06:56 129阅读 0赞

## 上传文件 ##

HTML5新增了文件API,提供客户端本地操作文件的可能.

我们可以通过file表单或拖放操作选择文件,还可以通过JavaScript读取文件的名称、大小、类型、和修改时间.

file类型的input表单新增了files属性,保存我们上传文件的信息,如果要实现多文件上传,可以设置input的multiple属性.

> 可以使用accept属性规定文件上传的MIME类型 例如’image/jpeg’

<form action="#">
            <div class="form-group">
                <label for="input_1">请选择文件</label>
                <input id="input_1" class="form-control" name="input_1" type="file">
            </div>
            <div class="form-group">
                <button id="btn_1" class="btn btn-default" type="button">读取文件信息</button>
            </div>
    </form>
    <pre id="result"></pre>
    </div>
    <script>
    var btn = document.querySelector('#btn_1');
    var input = document.querySelector('#input_1');
    btn.addEventListener('click', function() {
        
        // 获取文件域中选择的文件
        // var file = input.files[0];
        var file = input.files.item(0);
        if (file) {
        
            result.innerHTML =
                '文件名：' + file.name + '\n文件最近修改时间：' + file.lastModifiedDate+ '\n文件类型：' + file.type + '\n文件大小：' + file.size + '字节'
        } else {
        
            result.innerHTML = '没有选择任何文件';
        }
    });
    </script>

## 页面拖拽操作 ##

对于被拖拽的元素,HTML5增加了三个事件用于监听拖拽的过程

*  dragstart 拖拽开始
 *  drag 正在拖拽
 *  dragend 拖拽结束

<body>
        <div id="one" style="width: 300px;height: 300px;border: 1px solid red"></div>
        <div id="two" style="width: 100px;height: 100px;border: 1px solid blue" draggable="true"></div>
    </body>
    <script type="text/javascript">
        two.ondragstart = function(e){
         
            // e.preventDefault();
            console.log(e);
            e.dataTransfer.setData("Text",e.target.id);
            console.log(e.dataTransfer.getData("Text",e.target.id));
            one.innerHTML = '开始'
        }
        two.ondrag = function(e){
         
            one.innerHTML += '拖动中'
        }
        two.ondragend = function(e){
         
            one.innerHTML = '结束'
        }
    </script>

> 想要拖拽元素,必须设置draggable属性

> 页面默认的动作是拖拽后回到原位

在拖动阶段，我们可以存储被拖动元素的属性或者状态到事件对象的dataTransfer中，如果出现跳转，则是浏览器默认的事件被触发，我们需要使用`e.preventDefault()`来阻止默认事件。

投放区的事件

对于被拖的元素而言，拖向何处则为投放区，投放区的事件如下：

*  dragenter 被拖放元素进入
 *  dragover 被拖放元素移动
 *  dragleave 被拖放元素离开

<body>
        <div id="one" style="width: 300px;height: 300px;border: 1px solid red"></div>
        <div id="two" style="width: 100px;height: 100px;border: 1px solid blue" draggable="true"></div>
    </body>
    <script type="text/javascript">
        one.ondragenter = function(e){
         
            // e.preventDefault();
            console.log(e);
            one.innerHTML = '开始'
        }
        one.ondragover = function(e){
         
            one.innerHTML += '拖动中'
        }
        one.ondragleave = function(e){
         
            one.innerHTML = '结束'
        }
    </script>

而drop则是监听被拖拽物拖拽到投放区并松开鼠标的事件，他可以接收到`dataTransfer`中的数据，所以我们的页面内拖拽可以写成如下效果：

*  对于谷歌浏览器，`e.dataTransfer.setData(key,value)`会导致拖拽到投放区域外的时候浏览器默认搜索设置的值。如果需要，我们可以屏蔽它
 *  对于火狐浏览器，没有`e.dataTransfer.setData(key，value)`还不行。我们可以直接设置键值对为`null，""`;
 *  最新版本的谷歌和火狐浏览器没有发现问题
 *  drop事件并不能直接触发,因为默认的松开鼠标我们的拖拽物会返回原来的位置,并不会掉落,所以我们应该阻止投放区域的默认事件.

## 拖拽文件上传 ##

经过观察，事件对象中的dataTransfer也存在files属性，我们可以用熟悉的方法上传拖拽进来的文件：

<body>
        <div id="one" style="width: 300px;height: 300px;border: 1px solid red"></div>
    </body>
    <script type="text/javascript">
    one.ondragover = function(e) {
         
        e.preventDefault();
    }
    one.ondrop = function(e) {
         
        e.preventDefault()
        console.log(e.dataTransfer.files[0]);
    }
    </script>

然后做Ajax文件上传即可

one.ondrop = function(e) {
        
        e.preventDefault()
        var file = e.dataTransfer.files[0];
        var formData = new FormData();
        formData.append("aa", file);
        var xml = new XMLHttpRequest();
        xml.open("post", url, false);
        xml.send(formData);
    }