如何從輸入文件控件中刪除一個特定的選定文件

如何從輸入文件控件中刪除一個特定的選定文件？如何從輸入文件控件中刪除一個特定的選定文件

我有一個輸入文件控制與選擇多個文件的選項;然而，我想驗證一個文件，如果它有一個錯誤的擴展，那麼我應該從文件控制本身刪除該文件，這可能嗎？

我試過如下

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


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

下面是對象的屏幕截圖，但我不能修改它

enter image description here

來源

2013-09-27 Navin Leon

你打算如何處理這些文件？一旦用戶上傳他們，他們只是複製到你的tmp文件夾，他們的信息保存在你有的數組中，所以當你去處理它們時，只需跳過任何有錯誤擴展名的地方... –

夥計們，它不是一個數組，它的屬性爲「0」，「1」，「2」的對象，所以我不能在這裏做數組操作。 –

不幸的是，你不能修改FileList中的文件，因爲它們是隻讀的。創建一個新的FileList也是不可能的。使用輸入元素的「接受」屬性可以解決您的問題嗎？您可以使用以下命令從FileList中刪除所有文件：'$（「＃fileToUpload」）[0] .value =''' –

正如其他人所指出的，FileList是隻讀的。你可以通過將這些文件推入單獨的Array來解決這個問題。然後，您可以使用該策劃的文件列表執行任何您想要的操作。如果將它們上傳到服務器是目標，則可以使用FileReader API。

下面是完全避免需要修改FileList的方法。步驟：

通過從改變事件時，濾波器的每個文件添加正常文件輸入變化事件監聽器
迴路的期望驗證
推有效文件到單獨的陣列
使用FileReader API在本地讀取文件
將有效的處理文件提交給服務器

事件處理ER和基本的文件循環代碼：

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％左右。如果這是不可接受的，你將需要嘗試其他的東西。

來源

2013-10-07 23:02:39

嗨，只是一件事。文件是一個javascript對象，所以你不能使用.forEach它，你應該這樣做，而不是 [] .forEach.call（文件，函數（文件）{....}） – Fibonacci

謝謝。是的，這是一個好點。 –

此解決方案僅適用於如果您沒有上傳表單提交 – Jorge

-9

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-27 11:52:41 Ehsan

不是一個壞主意......我會用'newInput'替換'oldInput''，替換用於實際表單提交的真正的'hiddenInput'，並保留'oldInput'。 – skplunkerin

我認爲我應該在這兒加上我的評論，以及在這裏（我在這裏回答：JavaScript delete File from FileList to be uploaded）

我找到了一個解決方法。這完全不需要AJAX的請求，並且表單可以發送到服務器。基本上，您可以創建hidden或text輸入，並將它的value屬性設置爲處理選定文件後創建的base64字符串。

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

你可能會考慮這個想法創建多個輸入文件，而不是輸入text或hidden。這是行不通的，因爲我們不能爲它分配一個值。

這種方法將包括在發送到數據庫並忽略你可以輸入文件中的數據輸入文件：在後端

不考慮場;
您可以在序列化表單之前將disabled屬性設置爲輸入文件;
發送數據前刪除DOM元素。

當您想要刪除文件時，只需獲取元素的索引並從DOM中刪除輸入元素（文本或隱藏）。

要求：

你需要寫文件轉換爲Base64並存儲所有文件的數組裏面，只要輸入文件觸發change事件的邏輯。

優點：

這將基本上給你大量的控制，你可以過濾，比較文件，檢查文件大小，MIME類型，等等..

來源

2017-08-30 11:22:21

如何從輸入文件控件中刪除一個特定的選定文件

回答

相關問題