javascript - 如何使用 jquery 获取文件输入中删除文件的值？

Question

是否可以在文件上传输入字段中设置拖放文件的数据？或者需要将拖放的文件立即上传到服务器？

示例代码:

<input type="file" id="drop-box" />

$("#drop-box").on('drop', function (e) {
    e.stopPropagation();
    e.preventDefault();      
    var files = e.originalEvent.dataTransfer.files;
    readURL(files);
});

Answer 1

您可以使用 $('input')[0].files[0] 代替 e.originalEvent.dataTransfer.files。

The drop event is fired when an element or text selection is dropped on a valid drop target.

当您将文件拖放到输入中时，JQuery drop 事件会被触发，但它不会选择文件。您需要等待几次选择文件。

运行底部示例并在输入上放置文件以查看结果。

$("#drop-box").on('drop', function (e){
    setTimeout(function(){   
        e.stopPropagation(); 
        var files = $('#drop-box')[0].files[0];
        
        $("p").text(files.name);
        $('#drop-box').val("");
    },1);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="drop-box" />
<p></p>