FileListを作成してファイル入力にコピーします

Question

私はによってgetTransfer項目を取得するドラッグアンドドロップ領域を作成しようとしていますが、webkitGetAsEntryが存在し、その項目がディレクトリかファイルであるかどうかを確認してください。

私は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)); 
      } 
     } 
    } 

私は、私の避難所をプロトタイプを使用してオブジェクトを拡張することによって、ファイルリストオブジェクトを作成しようとしているでこだわっていることは、読み取り専用W3 FileList Interface

だHTMLInputElementの中にファイルリストにファイルをコピーすることはできませんJSの継承とプロトタイプについての私の頭をかなり包み込んでしまった。

私はFileListオブジェクトを作成し、それにファイルを取り込み、それをInputElementにコピーすることもできますか？

編集：間違ったJSFiddleリンク。

Answer 1

なぜFileListにファイルをコピーする必要がありますか？

代わりにFileReaderを使用してください。しかし、送信する前にファイルを検証するのは良い考えではありません。セキュリティのために、サーバー側でこれを行う必要があります。これまでにファイルを検証することはできますが、受信時にファイルの検証を再度行うべきです（SHOULD）。

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