gpt4 book ai didi

javascript - 创建一个 FileList 并将其复制到一个文件输入

转载 作者:太空狗 更新时间:2023-10-29 16:48:37 25 4
gpt4 key购买 nike

我正在尝试创建一个拖放区域,它将通过 webkitGetAsEntry 获取 dataTransfer 项目,并检查该条目是目录还是文件。

然后我希望能够将文件制作成文件列表并将其复制到文件输入(将在发布前进行验证和处理)。

JSFiddle

  function handleDrop(event) {
event.preventDefault();
event.dataTransfer.dropEffect = 'copy';
var length = event.dataTransfer.items.length;
var elFileInput = document.getElementById('File');
for (var i = 0; i < length; i++) {
var entry = event.dataTransfer.items[i].webkitGetAsEntry();
if (entry.isFile) {
convertFilesToFileObjects(entry);
}
else if (entry.isDirectory) {
var dirReader = entry.createReader();
dirReader.readEntries(function(entries) {
for (var j = 0; j < entries.length; j++) {
convertFileEntrysToFileObjects(entries[j]);
}
});
}
}
function convertFileEntrysToFileObjects(fileEntry) {
var addFileToInput = function (file) {
console.log(file);
//elFileInput.files = event.dataTransfer.files;
//Need to make a FileList and populate it with Files.
};
if (fileEntry.isFile) {
fileEntry.file(function (addFileToInput, file) {
addFileToInput(file);
}.bind(this, addFileToInput));
}
}
}

我无法将文件复制到 HTMLInputElement 中的文件列表,它是只读的 W3 FileList Interface

我坚持尝试通过使用原型(prototype)和扩展对象来创建 FileList 对象,我还没有完全了解 JS 继承和原型(prototype)。

我什至可以创建一个 FileList 对象并用文件填充它,然后将它复制到 InputElement 吗?

已编辑:错误的 JSFiddle 链接。

最佳答案

为什么需要将文件复制到FileList?

改用 FileReader。但是在发送之前验证文件不是一个好主意。为了安全起见,您应该在服务器端执行此操作。您可以之前验证该文件,但您应该在收到文件时再次验证该文件。

https://developer.mozilla.org/en-US/docs/Web/API/FileReader?redirectlocale=en-US&redirectslug=DOM%2FFileReader

关于javascript - 创建一个 FileList 并将其复制到一个文件输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18580777/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com