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

Posted 2023-05-08

【中文标题】使用 jQuery 将删除的文件添加到文件输入

【英文标题】：Add dropped file to a file input using jQuery

【发布时间】：2012-12-25 09:18:12

【问题描述】：

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

<div id="wrapper">
    <span id="fake-text-input"></span>
    <button id="select-a-file"></button>
    <input id="hidden-file-input" type="file" />
</div>

input[type="file"] 被隐藏 (display: none) 并通过侦听\触发 click 和 change 事件来处理选择文件。

我也想支持文件删除。当文件放在#fake-text-input 上时，我能够收听drop 事件，但我不知道如何将drop 事件转发到input[type="file"].. 甚至可能吗？

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

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

    // I have the file.. now what?
);

【问题讨论】：

你能提供你尝试过的代码吗？

你应该看看这个 SOq。 ***.com/questions/8006715/…

@insomiac 看看我的编辑。虽然代码不多..

@cggaurav 所以这意味着它不能完成？

我不知道将文件附加到文件输入的任何可能性。我认为出于安全原因不允许这样做。但也许你不需要它。为什么不能在获得文件后立即使用 $.ajax(type: "POST", ...) 触发 POST 请求？

【参考方案1】：

这在谷歌浏览器中与我一起使用，现在其他浏览器出现问题

$("input[type='file']").prop("files", e.originalEvent.dataTransfer.files);

【讨论】：

好吧，如果您找到解决方案，请告诉我

@nassimphp，你找到解决方案了吗？

【参考方案2】：

根据@NassimPHP 的回答，这行得通！

$("input[type='file']").prop("files", e.dataTransfer.files);