我有一个"file"
类型的input
,我想更改它的files
列表。示例:
<input type = "file" id = "fileinput" />
<script type = "text/javascript">
document.getElementById("fileinput").files = [10];
</script>
问题是fileinput
元素的files
列表没有设置。我该怎么做?
我有一个"file"
类型的input
,我想更改它的files
列表。示例:
<input type = "file" id = "fileinput" />
<script type = "text/javascript">
document.getElementById("fileinput").files = [10];
</script>
问题是fileinput
元素的files
列表没有设置。我该怎么做?
4条答案
按热度按时间xu3bshqb1#
确实不可能在用户没有请求的文件输入中添加 * 本地 * 文件;但是,有一种方法可以将
Blob
或File
对象添加到文件输入中,或从文件输入中删除特定文件**。要更改文件输入中的文件,必须将
fileInput.files
替换为另一个FileList
对象。问题是
FileList
对象是不可变的,没有暴露给JS的构造函数。创建自定义
FileList
的唯一方法是滥用DataTransfer
,这是一种专为使用拖放或通过剪贴板传输文件而设计的API。所有主流浏览器都支持它,但IE不支持,Safari从14.1版开始支持。你可以检查here。
您可以通过调用不带参数的构造函数来创建
DataTransfer
对象:创建的
DataTransfer
对象有一个files
属性,幸运的是,它是一个FileList
,包含DataTransfer
拥有的所有文件。但是如何将文件添加到
DataTransfer
?每个
DataTransfer
都有一个与之关联的DataTransferItemList
(可通过其items
属性访问),该DataTransferItemList
具有向DataTransfer
添加(或从DataTransfer
删除)项的方法。要添加一个文件,必须调用
add
方法并传递一个File
对象。就像这样:
如果您有不在
File
对象中的数据(例如Blob
或ArrayBuffer
字节),您可以使用File
constructor,将数据,文件名以及具有type
和lastModified
属性的对象传递给它:所以,总结一下,我们有这样的东西:
我相信现在这是相当混乱的,但让我们看看一些代码!
如果你想创建一个名为
hello.txt
的包含Hello world!
的文件,并将输入设置为包含这个文件,下面是你如何做到这一点:但是,除了替换文件之外,如何编辑输入中已有的文件列表呢?
1.创建
DataTransfer
1.从输入中添加除要删除的文件之外的所有现有文件
1.添加要添加的文件
1.将输入中的文件替换为
DataTransfer
中的文件this answer of mine关于这个主题。
为此,我创建了一对函数,用于从
File
s数组中获取和设置文件列表,因此可以在数组上执行转换,而不是使用DataTransfer
s执行复杂的操作:你可以这样使用它们:
9rnv2umw2#
出于安全原因,浏览器会阻止JavaScript更改将要上传的文件:只有用户可以通过用户界面选择文件。这是为了防止恶意脚本在用户不知情的情况下上传
/etc/passwd
。唯一的例外是,在表单上调用“reset”将清除文件或文件列表,但您永远不能以编程方式添加到。
dly7yett3#
const fileInput = document.getElementById('fileInput ')
const dataTransfer = new DataTransfer()
const file = new File(['Hello world!'],' hello.txt ',{type:'text/plain'})
dataTransfer.items.add(文件)
fileInput.files = dataTransfer.files
这应该能保存你一命
ecfsfe2w4#
您需要的是在
input
元素上使用multiple
属性。这样,在较新的浏览器用户将能够选择多个文件上传。