50

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

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

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

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


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

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

ここに画像の説明を入力

4

5 に答える 5

44

他の人が指摘したように、FileList読み取り専用です。ただし、これらのファイルを別のファイルにプッシュすることで、これを回避できますArray。その後、その精選されたファイルのリストを使用して、好きなことを行うことができます。それらをサーバーにアップロードすることが目標である場合は、FileReaderAPI を使用できます。

以下は、 を変更する必要を完全に回避する方法ですFileList。手順:

  1. 通常のファイル入力変更イベントリスナーを追加
  2. 変更イベントから各ファイルをループし、必要な検証をフィルタリングします
  3. 有効なファイルを別の配列にプッシュする
  4. API を使用FileReaderしてローカルでファイルを読み取る
  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 */
    }
  });
});

以下は、ファイル ループのより複雑なバージョンで、FileReaderAPI を使用してファイルをブラウザーに読み込み、必要に応じてそれを 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 */
    }
  });

FileReaderAPI利用時の注意事項です。ファイルを Base64 でエンコードすると、サイズが約 30% 増加します。それが受け入れられない場合は、別の方法を試す必要があります。

于 2013-10-07T23:02:39.163 に答える
-8

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);
    }
于 2014-09-27T11:52:41.140 に答える