找到，如果「取消」被點擊文件輸入

Question

我試着用在不同的位置描述一劈它使用：

document.body.onfocus = checkOnCancel(); 

一個例子：

var fileSelectEle = document.getElementById('fileinput'); 

fileSelectEle.onclick = charge; 

function charge() 
{ 
    document.body.onfocus = checkOnCancel; 
} 

function checkOnCancel() 
{ 
    alert("FileName:" + fileSelectEle.value + "; Length: " + fileSelectEle.value.length); 
    if(fileSelectEle.value.length == 0) alert('You clicked cancel!') 
    else alert('You selected a file!'); 
    document.body.onfocus = null; 
} 

有什麼問題嗎？因爲fileSelectedEle.value總是返回以前的執行值而不是用戶選擇的值。 這是輸入文件的預期行爲？如何解決這個問題以讀取選擇的實際文件？

http://jsfiddle.net/smV9c/2/

可以通過重現該錯誤：

步驟1：選擇文件 - 一些選擇一些文件（並注意的輸出）

步驟2：選擇文件 - 按取消（和通知輸出）

Answer 1

一種解決方案是使用input的onchange事件。

var fileSelectEle = document.getElementById('fileinput'); 

fileSelectEle.onchange = function() 
{ 
    if(fileSelectEle.value.length == 0) { 
    alert('You clicked cancel - ' + "FileName:" + fileSelectEle.value + "; Length: " + fileSelectEle.value.length); 
    } else { 
    alert('You selected a file - ' + "FileName:" + fileSelectEle.value + "; Length: " + fileSelectEle.value.length); 
    } 
} 

這正確響應所選擇的文件名更改，因爲你可以測試在這裏：http://jsfiddle.net/munderwood/6h2r7/1/

從你試圖做的方式行爲的唯一潛在的區別是，如果取消的權利或者連續兩次，或者連續兩次選擇同一個文件，那麼事件不會觸發。但是，每次文件名實際更改時，都會正確檢測到它。

我不知道爲什麼你的原始嘗試不起作用，但我最好的猜測是這是一個時間問題，異步觸發onfocus事件，並且在input控件的屬性完成更新之前。

UPDATE：，以確定哪些用戶已選擇每次關閉該文件對話框時，再次將接收焦點之間的短暫延遲，並檢查的值，即使沒有發生任何變化，計時問題可以被迴避文件輸入。在收到焦點後立即調用checkOnCancel，而以下版本的charge會導致它在十秒後被調用。

function charge() { 
    document.body.onfocus = function() { setTimeout(checkOnCancel, 100); }; 
} 

這是一個工作版本：http://jsfiddle.net/munderwood/6h2r7/2/。

Answer 2

有什麼問題嗎？因爲fileSelectedEle.value總是返回前一個執行值而不是用戶選擇的值。這是輸入文件的預期行爲嗎？如何解決這個問題以讀取選擇的實際文件？

沒有什麼錯，這是預期的行爲。如果用戶取消文件選擇過程，那麼就好像他們從未開始過它。所以之前的值保留在原位。

Answer 3

您可以掛接到，當他們取消窗口的文件選擇對話框，其被炒魷魚的window.focus事件。然後檢查它是否實際上選擇了一個文件。