輸入類型=「文件」，點擊取消後在文件中清除文件

<input type="file"/>點擊取消按鈕取消後，FF和IE文件中的「選擇文件」模式窗口中的取消點擊清除文件和路徑。有沒有什麼辦法可以在Chrome中改變這種行爲？輸入類型=「文件」，點擊取消後在文件中清除文件

來源

2013-07-22 Powerslave

你可以創建一個小提琴，並確切地告訴我們你的意思嗎？謝謝:) – GFP

這是回答你的問題，你甚至不能檢測到該按鈕cancel被點擊時：

How to detect when cancel is clicked on file input?

來源

2013-07-22 23:31:47

由於安全原因是不可能的，你不能在js中設置文件輸入的值 – Powerslave

https://jsfiddle.net/dqL97q0b/1/

這裏是圍繞工作，使鉻不能刪除按下取消時用戶存在的文件。

代碼註釋：當用戶打開文件選擇器時，如果已經選擇了一個文件，這將使Dom元素的克隆。然後，如果用戶在chrome中單擊取消，它會觸發更改Event Listener並且值將爲「」，因此在該特定情況下，我將刪除現在爲空的文件選擇器並還原克隆。

注意：每個文件選擇器Dom元素都需要一個唯一的ID，以便克隆可以正確存儲和檢索。

注：大部分的代碼只是記錄，顯示是如何工作的，特別是我想強調的是，如果你使用的DOM元素中內嵌的事件監聽器，例如的onclick =「fileClicked（事件）」然後您不需要將事件偵聽器重新附加到克隆。

<!doctype html><html><head></head><body> 
 

 
<h2>Fix for Chrome Removing File when 'cancel' clicked</h2> 
 

 
Upload Image: <input id="imageUpload" type="file" onclick="fileClicked(event)" onchange="fileChanged(event)"> 
 
<br/><br/> 
 
<label for="videoUpload">Upload Video:</label> <input id="videoUpload" type="file" onclick="fileClicked(event)" onchange="fileChanged(event)"> 
 
<br/><br/> 
 
<div id="log"></div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script> 
 
    //This is All Just For Logging: 
 
    var debug = true;//true: add debug logs when cloning 
 
    var evenMoreListeners = true;//demonstrat re-attaching javascript Event Listeners (Inline Event Listeners don't need to be re-attached) 
 
    if (evenMoreListeners) { 
 
     var allFleChoosers = $("input[type='file']"); 
 
     addEventListenersTo(allFleChoosers); 
 
     function addEventListenersTo(fileChooser) { 
 
      fileChooser.change(function (event) { console.log("file(#" + event.target.id + ") : " + event.target.value.split("\\").pop()) }); 
 
      fileChooser.click(function (event) { console.log("open(#" + event.target.id + ")") }); 
 
     } 
 
    } 
 

 
    var clone = {}; 
 

 
    // FileClicked() 
 
    function fileClicked(event) { 
 
     var fileElement = event.target; 
 
     if (fileElement.value != "") { 
 
      if (debug) { console.log("Clone(#" + fileElement.id + ") : " + fileElement.value.split("\\").pop()) } 
 
      clone[fileElement.id] = $(fileElement).clone(); //'Saving Clone' 
 
     } 
 
     //What ever else you want to do when File Chooser Clicked 
 
    } 
 

 
    // FileChanged() 
 
    function fileChanged(event) { 
 
     var fileElement = event.target; 
 
     if (fileElement.value == "") { 
 
      if (debug) { console.log("Restore(#" + fileElement.id + ") : " + clone[fileElement.id].val().split("\\").pop()) } 
 
      clone[fileElement.id].insertBefore(fileElement); //'Restoring Clone' 
 
      $(fileElement).remove(); //'Removing Original' 
 
      if (evenMoreListeners) { addEventListenersTo(clone[fileElement.id]) }//If Needed Re-attach additional Event Listeners 
 
     } 
 
     //What ever else you want to do when File Chooser Changed 
 
    } 
 
    </script> 
 
</body></html>

https://jsfiddle.net/dqL97q0b/1/

來源

2017-09-14 15:47:07

簡單而有效的解決方案：保持在一個變量文件的引用。每次輸入的變化事件被觸發您的時間檢查：

if(input.files[0]) // truthy, falsey 
{ 
    var file = input.files[0]; 
}

所以file將包含最新選定的文件，當用戶打開的對話框中，但取消了該文件引用不會改變，仍包含先前選定的文件。

來源

2018-03-08 08:59:34

輸入類型=「文件」，點擊取消後在文件中清除文件

回答

相關問題