如何从输入文件控件中删除一个特定的选定文件 [英] How to remove one specific selected file from input file control

问题描述

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

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?

我尝试如下

<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

推荐答案

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

As other people pointed out, FileList is read only. You can get around this by pushing those files into a separate Array though. 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 FileReader API.

下面是一种完全避免需要修改FileList的方法.步骤:

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

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

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 FileReader API to read files locally
5. Submit valid, processed files to server

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

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

下面是一个更复杂的文件循环版本，展示了如何使用 FileReader API 将文件加载到浏览器中，并有选择地将其作为 Base64 编码的 blob 提交到服务器.

Below is a more complicated version of the file loop that shows how you can use the FileReader API to load the file into the browser and optionally submit it to a server as a Base64 encoded 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 API 的注意事项.Base64 编码文件将使其大小增加约 30%.如果这不可接受，您将需要尝试其他方法.

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

这篇关于如何从输入文件控件中删除一个特定的选定文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！