文件拖曳上传

文件拖曳上传

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
<script>
let odiv = document.getElementsByClassName('son1')[0];

odiv.addEventListener('drop', function(e){
e.stopPropagation();
e.preventDefault();

let df = e.dataTransfer;
let formdata = new FormData();
formdata.append('smfile', df.files[0]);
$.ajax({
url: 'https://sm.ms/api/upload',
type: 'POST',
processData: false,
contentType: false,
data: formdata,
success: function(res) {
console.log(res)
}
})
}, false);

odiv.addEventListener("dragenter", function (e) {
e.preventDefault();
e.stopPropagation();
}, false);

odiv.addEventListener("dragover", function (e) {
e.preventDefault();
e.stopPropagation();
}, false);

odiv.addEventListener("dragleave", function (e) {
e.preventDefault();
e.stopPropagation();
}, false);
</script>

利用如上的代码实现文件的拖曳上传!

文章作者: Luo Jun
文章链接: /2018/05/09/文件拖曳上传/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Aning