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

问题描述

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

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

我试过如下

 < input type =filename =fileToUploadid =fileToUploadmultiple /> 
 
 
< script> $（＃fileToUpload）[0] .files [0]< / script> 
  

以下是对象的截图，但我无法修改它

=h2_lin>解决方案

noreferrer> FileList 是只读的。你可以通过将这些文件推入一个单独的 Array 来解决这个问题。然后你可以做任何你想要的文件列表的文件。如果将其上传到服务器是目标，则可以使用 FileReader API。

完全避免需要修改 FileList 。
步骤：

1. 添加普通的文件输入更改事件监听程序
   
2. 循环每个文件从变化事件中筛选所需的验证
   
3. 将有效文件推送到单独的数组中
   
4. 使用 FileReader API在本地读取文件


5. 提交有效的，经处理的文件到服务器
   

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

  var validatedFiles = []; （变量），函数（事件）{
 var files = event.originalEvent.target.files; 
 files.forEach（function（file））
 $（＃fileToUpload {
 if（file.name.matches（/something.txt/））{
 validatedFiles.push（file）; //最简单的情况
} else {
 / * do别的东西* / 
} 
}）; 
}）; 
  

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

  files.forEach（function（file）{
 if（file.name.matches（/something.txt/））{//你也可以在处理文件客户端之后做更复杂的验证
 var reader = new FileReader（）; 
 //安装监听器
 reader.onload =（function（processedFile）{
 return function（e）{
 var fileData = {name：processedFile.name，fileData：e.target.result}; 
 
 //提交单个文件到服务器
 $ .post（/ your / url / here，fileData） ; 
 
 //或者添加到列表中以稍后提交
 validatedFiles.push（fileData）; 
}; 
））（file）; 
 
 //处理文件
 reader.re adAsDataURL（文件）; 
} else {
 / *仍然做其他事情* / 
} 
}）; 
  

注意使用 FileReader API 。 Base64编码文件的大小将增加30％左右。如果这是不可接受的，你将需要尝试别的。

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

解决方案

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.

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

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

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

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屋！