创建一个 FileList 并将其复制到 File 输入
Posted
技术标签:
【中文标题】创建一个 FileList 并将其复制到 File 输入【英文标题】:Create a FileList and copy it to a File input 【发布时间】:2013-09-06 00:12:51 【问题描述】:我正在尝试创建一个拖放区域,该区域将通过 webkitGetAsEntry 获取 dataTransfer 项目并检查该条目是目录还是文件。
然后我希望能够将文件制作成 FileList 并将其复制到文件输入中(在发布之前将对其进行验证和处理)。
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 中的 FileList,它是只读的 W3 FileList Interface
我一直在尝试通过使用原型和扩展对象来创建 FileList 对象,我还没有完全了解 JS 继承和原型。
我什至可以创建一个 FileList 对象并用文件填充它,然后将其复制到 InputElement?
已编辑:错误的 JSFiddle 链接。
【问题讨论】:
相关:***.com/questions/8006715/… 这些天似乎有可能,但只有真正的FileList
,你似乎无法做到这些......
【参考方案1】:
为什么需要将文件复制到 FileList?
请改用 FileReader。但是在发送之前验证文件并不是一个好主意。为了安全起见,您应该在服务器端执行此操作。您可以在之前验证文件,但您应该在收到文件时再次验证。
https://developer.mozilla.org/en-US/docs/Web/API/FileReader?redirectlocale=en-US&redirectslug=DOM%2FFileReader
【讨论】:
我正在使用 MVC3 中的注释对 HtmlInputElement 进行客户端和服务器端验证。表单作为 HttpPostedFileBase 类发布并在控制器中处理。我正在考虑改用 FileRead 并使用 XMLHttpRequest 发布文件,但如果我能让它工作,我会很高兴。以上是关于创建一个 FileList 并将其复制到 File 输入的主要内容,如果未能解决你的问题,请参考以下文章