js拖动文件获取文件列表

方法介绍

  1. 很多dom都可以给属性 draggable="true"
  2. 阻止ondragover事件默认行为 e.preventDefault();
  3. 阻止ondrop事件默认行为 e.preventDefault();
  4. 获取文件列表 e.dataTransfer.files

Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
    <div id="drag1" draggable="true">drag-div</div>
    <input type="file" id="drag2" draggable="true">
    <script>
        drag1.ondragover = function(e) {
            e.preventDefault();
            console.log(e);
        }
        drag1.ondrop = function(e){
            e.preventDefault();
            console.log( e.dataTransfer.files );
        }
        drag2.addEventListener('drop',e => {
            e.preventDefault();
            console.log( e.dataTransfer.files );
        })
    </script>
</body>

封装XMLHttpRequest代替fetch

可用在需要动态更新文件上传进度

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
const futch = (url, opts = {}, onProgress) => {
    return new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest();
        xhr.open(opts.method || 'get', url);
        for (var k in opts.headers || {})
            xhr.setRequestHeader(k, opts.headers[k]);
        xhr.onload = (e) => resolve(e.target.responseText);
        xhr.onerror = reject;
        if (xhr.upload && onProgress) xhr.upload.onprogress = onProgress; // event.loaded / event.total * 100 ; //event.lengthComputable
        xhr.send(opts.body);
    });
};

// futch封装后的使用
var formData = new FormData()
formData.append('file', files[0] )
console.log(formData);
futch('/a', {
    method: 'post',
    body: formData,
    headers: {},
}, ProgressEvent=>{

}).then(res=>{

})

选择文件拿到base64

1
2
3
4
5
6
7
8
9
10
11
12
// React
<input type="file" onChange={e=>{
    let reader = new FileReader();
    if( e.target.files[0] ){
        reader.readAsDataURL(e.target.files[0]);
        reader.onload = (event) => {
            let b64 = event.target?.result
            console.log(b64);
        }
    }
    
}}>