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

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

我有一个input文件控制与select多个文件的选项; 不过，我想validation一个文件，如果它有一个错误的扩展，那么我应该从文件控制本身删除该文件，这可能吗？

我尝试如下

<input type="file" name="fileToUpload" id="fileToUpload" multiple/> <script> $("#fileToUpload")[0].files[0] </script> 

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

Answer 1

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

下面是完全避免需要修改FileList 。 脚步：

1. 添加正常的文件input更改事件侦听器
2. 循环遍历change事件中的每个文件，筛选所需的validation
3. 将有效文件推入单独的数组中
4. 使用FileReader API在本地读取文件
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 API将文件加载到浏览器中，并可以将其作为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 API。 Base64编码文件的大小将增加30％左右。 如果这是不能接受的，你将需要尝试别的。

Answer 2

我想我也应该在这里添加我的评论（我已经在这里回答： JavaScript从FileList中删除file upload ）

我find了一个解决方法。 这将不需要AJAX的请求，表单可以发送到服务器。 基本上你可以创build一个hidden或textinput，并将其value属性设置为在处理所选文件后创build的base64string。

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

您可能会考虑创build多个input文件而不是inputtext或hidden的想法。 这不会工作，因为我们不能为它分配一个值。

这种方法将包括input文件中的数据发送到数据库，并忽略input文件，你可以：

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

当你想删除一个文件只是获取元素的索引，并从DOM中删除input元素（文本或隐藏）。

要求：

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

优点：

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

Answer 3

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