web-dev-qa-db-ja.com

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

入力ファイル制御から特定の選択したファイルを削除する方法は？

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

私は以下のように試しました

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


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

以下はオブジェクトのスクリーンショットですが、変更することはできません

enter image description here

javascriptjqueryfile-uploadmultifile
42
Navin Leon

他の人が指摘したように、 FileList は読み取り専用です。ただし、これらのファイルを別のArrayにプッシュすることで回避できます。その後、そのキュレーションされたファイルのリストを使用して、必要な操作を実行できます。それらをサーバーにアップロードすることが目的であれば、 FileReader APIを使用できます。

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

  1. 通常のファイル入力変更イベントリスナーを追加する
  2. 変更イベントから各ファイルをループし、必要な検証のためにフィルター処理します
  3. 有効なファイルを別の配列にプッシュします
  4. FileReader AP​​Iを使用して、ファイルをローカルで読み取ります
  5. 有効な処理済みファイルをサーバーに送信する

イベントハンドラーと基本的なファイルループコード：

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 AP​​Iを使用してファイルをブラウザにロードし、オプションでBase64エンコードblobとしてサーバーに送信する方法を示しています。

  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 */
    }
  });

FileReader AP​​Iの使用に関する注意事項。ファイルをBase64エンコードすると、サイズが約30％増加します。それが受け入れられない場合は、別のものを試す必要があります。

38
Andrew Hubbs

ここにもコメントを追加する必要があると思いました（ここで回答しました： JavaScriptはFileListからアップロードするファイルを削除します ）

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

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

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

このメソッドは、データベースに送信されるデータに入力ファイルを含め、入力ファイルを無視するには次のようにします。

  • バックエンドでは、フィールドを考慮しないでください。
  • フォームをシリアル化する前に、入力ファイルにdisabled属性を設定できます。
  • データを送信する前にDOM要素を削除します。

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

要件：

  • 入力ファイルがchangeイベントをトリガーするたびに、base64でファイルを変換し、すべてのファイルを配列内に保存するロジックを記述する必要があります。

長所：

  • これにより、基本的に多くの制御が可能になり、ファイルのフィルタリング、比較、ファイルサイズのチェック、MIMEタイプなどを行うことができます。
4
Michael Mammoliti