入力ファイルコントロールから選択した特定のファイルを削除する方法

Question

入力ファイルコントロールから特定のファイルを削除する方法はありますか？

複数のファイルを選択するオプション付きの入力ファイルコントロールがあります。しかし、私はファイルを検証したいと思うし、それが間違った拡張子を持っている場合は、ファイルコントロール自体からそのファイルを削除する必要がありますか？

は、私は以下のオブジェクトのスクリーンショットですが、私は他の人が指摘したように、それは

Answer 1

、FileListが読み取り専用変更することはできませんよ

<input type="file" name="fileToUpload" id="fileToUpload" multiple/> 


<script> $("#fileToUpload")[0].files[0] </script> 

次のように試してみました。あなたは別のArrayにこれらのファイルをプッシュすることによってこれを回避することができます。あなたはそのファイルのリストを選んであなたが望むものを何でもすることができます。それらをサーバーにアップロードすることが目標の場合は、FileReader APIを使用できます。

以下は、FileListを修正する必要性を完全に回避する方法についてのラウンドです。 手順：

1. 使用して、
2. 別々の配列に、変更イベントから、各ファイルをループ
3. ローカルファイルを読むためにFileReader APIを希望検証のためのフィルタ
4. プッシュ有効なファイルを通常のファイル入力変更イベントリスナーを追加します。
5. サーバー

イベントhandlに有効な、処理されたファイルを提出ERおよび基本的なファイルループコード：以下

var validatedFiles = []; 
$("#fileToUpload").on("change", function (event) { 
    var files = event.originalEvent.target.files; 
    files.forEach(function (file) { 
    if (file.name.matches(/something.txt/)) { 
     validatedFiles.push(file); // Simplest case 
    } else { 
     /* do something else */ 
    } 
    }); 
}); 

あなたがブラウザにファイルをロードするためにFileReader APIを使用して、オプションをBase64として、それをサーバに送信することができます方法を示していたファイルループのより複雑なバージョンです。エンコードされたブロブ。

files.forEach(function (file) { 
    if (file.name.matches(/something.txt/)) { // You could also do more complicated validation after processing the file client side 
     var reader = new FileReader(); 
     // Setup listener 
     reader.onload = (function (processedFile) { 
     return function (e) { 
      var fileData = { name : processedFile.name, fileData : e.target.result }; 

      // Submit individual file to server 
      $.post("/your/url/here", fileData); 

      // or add to list to submit as group later 
      validatedFiles.push(fileData); 
     }; 
     })(file); 

     // Process file 
     reader.readAsDataURL(file); 
    } else { 
     /* still do something else */ 
    } 
    }); 

APIを使用する場合の注意点をご記入ください。FileReader Base64でファイルをエンコードすると、サイズが約30％増加します。それが受け入れられない場合は、他のものを試す必要があります。

Answer 2

HTML

<input id="fileInput" name="fileInput" type="file" /> 
<input onclick="clearFileInput()" type="button" value="Clear" /> 

javascriptの

function clearFileInput(){ 
     var oldInput = document.getElementById("fileInput"); 

     var newInput = document.createElement("input"); 

     newInput.type = "file"; 
     newInput.id = oldInput.id; 
     newInput.name = oldInput.name; 
     newInput.className = oldInput.className; 
     newInput.style.cssText = oldInput.style.cssText; 
     // copy any other relevant attributes 

     oldInput.parentNode.replaceChild(newInput, oldInput); 
    } 

Answer 3

私は（私はここで答えました：JavaScript delete File from FileList to be uploadedを）私はここにもここに私のコメントを追加する必要があることを考えた私は、回避策を見つけた

。これは、リクエストにAJAXを必要とせず、フォームをサーバーに送ることができます。基本的にhiddenまたはtext入力を作成し、選択したファイルを処理した後に作成されるbase64文字列にvalue属性を設定できます。

<input type=hidden value=${base64string} /> 

おそらく、代わりに入力textまたはhiddenの複数の入力ファイルを作成するためのアイデアを検討します。これは、値を割り当てることができないため、機能しません。

このメソッドは、データベースに送信されるデータには、入力ファイルが含まれますし、あなたは可能性が、入力ファイルを無視する：バックエンドで

• 、フィールドを考慮していません。
• フォームをシリアル化する前に、入力ファイルにdisabled属性を設定できます。
• データを送信する前にDOM要素を削除します。

ファイルを削除する場合は、要素のインデックスを取得し、入力要素（テキストまたは非表示）をDOMから削除します。

要件：

• あなたは、base64でファイルを変換し、入力ファイルがchangeイベントをトリガするたびに、アレイ内のすべてのファイルを格納するためのロジックを記述する必要があります。

長所：

• これは基本的にたくさん制御のあなたを与えるだろう、あなたはフィルタリングすることができ、ファイルを比較し、ファイルサイズ、MIMEタイプなど..
をチェック