jQuery 如何从输入文件控件中删除一个特定的选定文件

How to remove one specific selected file from input file control

提问by Navin Leon

How to remove one specific selected file from input file control?

如何从输入文件控件中删除一个特定的选定文件？

I have an input file control with the option to select multiple files; however, I want to validate a file and if it has an wrong extension then I should remove that file from the file control itself, is it possible?

我有一个输入文件控件，可以选择多个文件；但是，我想验证一个文件，如果它的扩展名错误，那么我应该从文件控件本身中删除该文件，这可能吗？

I tried as below

我试过如下

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


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

Below is the screenshot of the object but I am not able to modify it

下面是对象的屏幕截图，但我无法修改它

采纳答案by Andrew Hubbs

As other people pointed out, FileListis read only. You can get around this by pushing those files into a separate Arraythough. You can then do whatever you want with that curated list of files. If uploading them to a server is the goal, you can use the FileReaderAPI.

正如其他人指出的那样，FileList是只读的。您可以通过将这些文件推送到单独的文件中来解决此问题Array。然后，您可以使用该精选文件列表执行任何您想要的操作。如果目标是将它们上传到服务器，则可以使用FileReaderAPI。

Below is a round about way of completely avoiding needing to modify the FileList. Steps:

下面是一种完全避免需要修改FileList. 脚步：

1. Add normal file input change event listener
2. Loop through each file from change event, filter for desired validation
3. Push valid files into separate array
4. Use FileReaderAPI to read files locally
5. Submit valid, processed files to server

1. 添加普通文件输入更改事件监听器
2. 从更改事件循环遍历每个文件，过滤所需的验证
3. 将有效文件推入单独的数组
4. 使用FileReaderAPI在本地读取文件
5. 向服务器提交有效的、处理过的文件

Event handler and basic file loop code:

事件处理程序和基本文件循环代码：

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

Below is a more complicated version of the file loop that shows how you can use the FileReaderAPI to load the file into the browser and optionally submit it to a server as a Base64 encoded blob.

下面是一个更复杂的文件循环版本，展示了如何使用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 */
    }
  });

A note of caution about using FileReaderAPI. Base64 encoding a file will increase its size by around 30%. If that isn't acceptable you will need to try something else.

关于使用FileReaderAPI 的注意事项。Base64 编码文件将使其大小增加约 30%。如果这是不可接受的，您将需要尝试其他方法。

回答by Michael Mammoliti

I thought that I should add my comment here as well here (I've answered here: JavaScript delete File from FileList to be uploaded)

我想我也应该在这里添加我的评论（我已经在这里回答：JavaScript delete File from FileList to be upload）

I found a workaround. This will not require AJAX for the request at all and the form can be sent to the server. Basically you could create an hiddenor textinput and set it's valueattribute to the base64 string created after processing the file selected.

我找到了一个解决方法。这根本不需要 AJAX 请求，表单可以发送到服务器。基本上，您可以创建一个hidden或text输入并将其value属性设置为处理所选文件后创建的base64 字符串。

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

You will probably consider the idea to create multiple input file instead of input textor hidden. This will not work as we can't assign a value to it.

您可能会考虑创建多个输入文件而不是 inputtext或hidden. 这将不起作用，因为我们无法为其分配值。

This method will include the input file in the data sent to the database and to ignore the input file you could:

此方法将在发送到数据库的数据中包含输入文件并忽略输入文件，您可以：

• in the back-end don't consider the field;
• you can set the disabledattribute to the input file before serialising the form;
• remove the DOM element before sending data.

• 在后端不考虑领域；
• 您可以disabled在序列化表单之前将属性设置为输入文件；
• 在发送数据之前删除 DOM 元素。

When you want to delete a file just get the index of the element and remove the input element (text or hidden) from the DOM.

当您想删除文件时，只需获取元素的索引并从 DOM 中删除输入元素（文本或隐藏）。

Requirements:

要求：

• You need to write the logic to convert files in base64 and store all files inside an array whenever the input file trigger the changeevent.

• 您需要编写逻辑以在 base64 中转换文件并将所有文件存储在数组中，只要输入文件触发change事件。

Pros:

优点：

• This will basically give you a lotof control and you can filter, comparing files, check for file size, MIME type, and so on..

• 这基本上会给你很多控制，你可以过滤、比较文件、检查文件大小、MIME 类型等等。

回答by Ehsan

html

html

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

javascript

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