1. html 代码

准备一个jquery.js

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style>
        #drag-frame {
            width: 500px;
            height: 400px;
            border: dashed 4px gray;
            border-radius: 10px;
        }
    </style>
    <script src="js/jquery.js"></script>
    <script src="js/drag.js"></script>
    <body>
        <div id="drag-frame" class="drag-frame">
            <table class="table">
                <tbody class="tbody"></tbody>
            </table>
        </div>
        <input type="button" id="clear" value="清空" />
    </body>

</html>

2. js代码

$(() => {
    //添加拖拽事件
    var dz = document.getElementById('drag-frame');
    dz.ondragover = function(ev) {
        //阻止浏览器默认打开文件的操作
        ev.preventDefault();
        //拖入文件后边框颜色变红
        this.style.borderColor = 'red';
    }

    dz.ondragleave = function() {
        //恢复边框颜色
        this.style.borderColor = 'gray';
    }
    dz.ondrop = function(ev) {
        ev.preventDefault();
        //恢复边框颜色
        this.style.borderColor = 'gray';
        //阻止浏览器默认打开文件的操作

        var drag_files = ev.dataTransfer.files;
        var frag = document.createDocumentFragment(); //为了减少js修改dom树的频度，先创建一个fragment，然后在fragment里操作
        var tr, time, size;
        for(var file of drag_files) {
            tr = document.createElement('tr');
            //获取文件大小
            size = Math.round(file.size * 100 / 1024) / 100 + 'KB';
            //获取格式化的修改时间
            time = file.lastModifiedDate.toLocaleDateString() + ' ' + file.lastModifiedDate.toTimeString().split(' ')[0];
            tr.innerHTML = '<td>' + file.name + '</td><td>' + time + '</td><td>' + size + '</td><td>删除</td>';
            console.log(size + ' ' + time);
            frag.appendChild(tr); //?
            dragFiles.set(file.name,file);
        }
        this.childNodes[1].childNodes[1].appendChild(frag);
        //为什么是‘1'？文档里几乎每一样东西都是一个节点，甚至连空格和换行符都会被解释成节点。而且都包含在childNodes属性所返回的数组中.不同于jade模板
    }
    // 用事件委托的方法为‘删除'添加点击事件，使用jquery中的on方法
    $(".tbody").on('click', 'tr td:last-child', function() {
        //删除拖拽框已有的文件
        var key = $(this).prev().prev().prev().text();
        console.log(key);
        dragFiles.delete(key)
        $(this).parent().remove();
    });

    $("#clear").click(clearAll);
});
// 使用map的好处是可以去重
let dragFiles = new Map();

//清空所有内容
function clearAll() {
    $("#drag-frame tbody").html('');

    dragFiles.clear();
}

/**
 * 获取FormData对象
 */
function getFormData() {
    var formDate = new FormData();
    dragFiles.forEach(function(item) {
        formDate.append("files",item);
    })

    return formDate;
}

3. 效果如图

这里写图片描述

4. 上传

使用getFormData()获取 FormData 对象后，剩下的操作可以参照 springMVC文件上传

拖拽上传文件的前端实现

1. html 代码

2. js代码

3. 效果如图

4. 上传

猜你喜欢