Question

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

然后，我希望能够将文件转换为FileList并将其复制到文件输入（将在发布之前进行验证和处理）。

  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链接。

Answer 1

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

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

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

创建一个FileList并将其复制到File输入

1 个答案: