使用jQuery将删除的文件添加到文件输入

tam*_*mir 12 file-io jquery drag-and-drop

我有一个自定义文件输入:

<div id="wrapper">
    <span id="fake-text-input"></span>
    <button id="select-a-file"></button>
    <input id="hidden-file-input" type="file" />
</div>
Run Code Online (Sandbox Code Playgroud)

input[type="file"]是隐藏的(display: none),并选择一个文件被监听\触发处理clickchange事件.

我也想支持文件丢弃.drop当文件被丢弃时,我能够听到事件,#fake-text-input但我不知道如何将drop事件转发给input[type="file"]..甚至可能吗?

我对文件输入不透明技巧不感兴趣:)

$('body').on('drop', '#wrapper', function(e) {
    var file = e.originalEvent.dataTransfer.files[0];

    // I have the file.. now what?
});
Run Code Online (Sandbox Code Playgroud)

小智 15

这在谷歌浏览器中与我合作,现在与其他浏览器的问题

$("input[type='file']").prop("files", e.originalEvent.dataTransfer.files);
Run Code Online (Sandbox Code Playgroud)

  • 好吧,如果你找到解决方案,请告诉我 (3认同)