动态设置文件输入的值[重复]

Posted 2023-02-21

【中文标题】动态设置文件输入的值[重复]

【英文标题】：Dynamically set value of a file input [duplicate]

【发布时间】：2010-11-04 06:30:50

【问题描述】：

有没有办法设置文件输入 (<input type="file" />) 的值，还是为了安全而全部屏蔽？我正在尝试使用 google gears 的 openFiles 来制作一个简单的多上传器。

注意：

下面的答案反映了 2009 年旧版浏览器的状态。现在，您实际上可以在 2017 年使用 javascript 动态/编程地设置文件输入元素的值。

有关详细信息以及演示，请参阅此问题中的答案：How to set file input value programatically (i.e.: when drag-dropping files)?

【问题讨论】：

我很确定你是对的，文件输入字段是只读的。

我在这里做了一个完整的参考和最新的（2013 年 12 月）回答：Remember and Repopulate File Input

重新打开。 62+62 次投票（更不用说 +15 次书签）不仅仅意味着对某人的一些奇怪意见

【参考方案1】：

不能动态更改文件字段的值，否则你可以将其设置为“c:\yourfile”并很容易窃取文件。

但是，多上传系统有很多解决方案。我猜你想要一个多选打开对话框。

也许看看http://www.plupload.com/ - 这是一个非常灵活的多文件上传解决方案，并且支持拖放区等

【讨论】：

有人用有效的网址替换了网址。

我认为这个答案已经过时了。不再可以设置默认文件，因为它可以通过 FileReader API 读取并由 XHR 发送。 input.files 是只读的这一事实可能是遗留问题。

考虑到问题是“有没有办法设置文件输入的值”？答案说“这是不可能的”.. 仍然完全有效的答案不是吗？它与 FileReader API 或 XHR 有什么关系？

【参考方案2】：

我正在开发一个 Angular js 应用程序，并且遇到了类似的问题。我所做的是显示数据库中的图像，然后创建一个按钮来删除或保留当前图像。如果用户决定保留当前图像，我将 ng-submit 属性更改为另一个不需要图像验证的函数，并在不触及原始图像路径名称的情况下更新数据库中的记录。删除图像功能还将 ng-submit 属性值更改回提交表单并包括图像验证和上传的功能。还有一些 javascript 可以滑动到视图中以上传新图像。

【参考方案3】：

我最终为 AngularJS 做了这样的事情，以防有人偶然发现这个问题：

const imageElem = angular.element('#awardImg');

if (imageElem[0].files[0])
    vm.award.imageElem = imageElem;
    vm.award.image = imageElem[0].files[0];

然后：

if (vm.award.imageElem)
    $('#awardImg').replaceWith(vm.award.imageElem);
    delete vm.award.imageElem;

【参考方案4】：

我遇到了类似的问题，然后我尝试用 JavaScript 编写它，它可以工作！ ：referenceToYourInputFile.value = "" ;

【讨论】：

这个“工作”的方式是什么？ Mozilla Docs 明确指出，“您不能从脚本中设置文件选择器的值；执行类似 [this] 的操作没有任何效果”

...除了清除文件选择。

问题是关于文件输入的设置值，而不是清除它。