HTML实现拖拽文件并将参数显示在控制台

项目需要，不过考虑数据比较大最终决定放弃拖拽……
参考博客【传送门】
效果展示如下：

{% extends 'WebPage/base.html' %}
{% block main_body %}
<style>

    .dropArea {
        border: 5px dashed;
        border-color:#708090;
        height: 150px;
    }
</style>
<!--主体：-->
<main class="lyear-layout-content">

      <div class="container-fluid">

        <div class="row">
          <div class="col-lg-12">
            <div class="card" >
              <div class="card-body">
               <!--拖拽实现上传文件-->

<!--                <span id="uploadFileButton">上传文件</span>-->
<!--                <span id="uploadDirectoryButton">上传文件夹</span>-->
                <button id="uploadFileButton"  class="btn btn btn-primary" type="button">上传文件</button>
                <button id="uploadDirectoryButton" class="btn btn-warning btn-w-md" type="button">上传文件夹</button>
                  <p></br></p>
                <section class="dropArea" id="dropArea">把文件拽进来</section>



              </div>
              </div>
            </div>
          </div>

        </div>



    </main>
<!--嵌入脚本-->
<script type="text/javascript">

class SuperUploader{

    constructor({ uploadFileEl, uploadDirectoryEl, dropAreaEl, successCallback }) {
        uploadFileEl && this.initUploadFile(uploadFileEl, successCallback);
        uploadDirectoryEl && this.initUploadDirectory(uploadDirectoryEl, successCallback);
        dropAreaEl && this.initDragAndDrop(dropAreaEl, successCallback);
    }


    initUploadFile(el, successCallback) {
        const oRealButton = document.createElement("input");
        oRealButton.setAttribute("type", "file");
        oRealButton.setAttribute("multiple", true);
        oRealButton.style.display = "none";
        oRealButton.addEventListener("change", e => {
            let files = oRealButton.files;
            for (let i = 0; i <= files.length - 1; i++) {
                let file = files[i];
                // 这里的 file.webkitRelativePath 都是 "" ,不是我们想要的.要用 file.name
                successCallback({ file, path: file.name });
            }
        })
        document.body.appendChild(oRealButton);
        el.addEventListener("click", e => {
            oRealButton.click();
        });
    }

    initUploadDirectory(el, successCallback) {
        const oRealButton = document.createElement("input");
        oRealButton.setAttribute("type", "file");
        oRealButton.setAttribute("webkitdirectory", true);
        oRealButton.style.display = "none";
        oRealButton.addEventListener("change", e => {
            let files = oRealButton.files;
            for (let i = 0; i <= files.length - 1; i++) {
                let file = files[i];
                // 这里的 file.webkitRelativePath 就是我们想要的格式
                successCallback({ file, path: file.webkitRelativePath });
            }
        })
        document.body.appendChild(oRealButton);
        el.addEventListener("click", e => {
            oRealButton.click();
        });
    }

    initDragAndDrop(el, successCallback) {
        el.addEventListener("dragover", e => {
            e.preventDefault();
        });
        el.addEventListener("drop", e => {
            let items = e.dataTransfer.items;
            for (let i = 0; i <= items.length - 1; i++) {
                let item = items[i];
                if (item.kind === "file") {
                    let entry = item.webkitGetAsEntry();
                    this.getFileFromEntryRecursively(entry, successCallback);
                }
            }
            e.preventDefault();
        });
    }

    getFileFromEntryRecursively(entry, successCallback) {
        if (entry.isFile) {
            entry.file(file => {
                // 这里的 file.webkitRelativePath 都是 "" ,不是我们想要的.
                // entry.fullPath 是前面带斜杠的,要把斜杠去掉的
                let path = entry.fullPath.substring(1);
                successCallback({ file, path });
            }, e => { console.log(e); });
        } else {
            let reader = entry.createReader();
            reader.readEntries(entries => {
                entries.forEach(entry => this.getFileFromEntryRecursively(entry, successCallback));
            }, e => { console.log(e); });
        }
    }
}

</script>
<script type="text/javascript">
    //具体操作
new SuperUploader({
        uploadFileEl: document.getElementById("uploadFileButton"),
        uploadDirectoryEl: document.getElementById("uploadDirectoryButton"),
        dropAreaEl: document.getElementById("dropArea"),
        // “三合一”的成功回调，参数 file：文件实体，path：相对路径
        successCallback: ({ file, path }) => {
            console.log("文件名称：" + file.name + "，相对路径：" + path);
        },
    });
</script>
{% endblock %}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139