Znajdź jeżeli „anulować” został kliknięty na wejściu pliku

Question

Próbowałem za pomocą hack opisaną w różnych miejscach, które wykorzystuje:

document.body.onfocus = checkOnCancel(); 

przykład:

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

jest coś złego tutaj? Ponieważ fileSelectedEle.value zawsze zwraca poprzednią wartość wykonania, a NIE tę wybraną przez użytkownika. Czy jest to oczekiwane zachowanie pliku wejściowego? Jak rozwiązać ten problem, aby odczytać wybrany plik?

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

można odtworzyć błąd przez:

Krok 1: SelectFile - niektóre wybrać jakiś plik (i zauważyć wyjście)

Krok 2: SelectFile - Naciśnij przycisk Anuluj (i nota wyjście)

Answer 1

Jednym z rozwiązań jest użycie zdarzenia onchange z .

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

ten reaguje prawidłowo na zmiany w wybranym pliku, jak można sprawdzić tutaj: http://jsfiddle.net/munderwood/6h2r7/1/

Jedyna różnica potencjałów w zachowaniu od sposobu próbowali to zrobić, jest to, że jeśli odwołać prawo dwa razy z rzędu lub wybierz ten sam plik dwa razy z rzędu, a następnie wydarzenie się nie uruchomi. Jednak za każdym razem, gdy nazwa pliku faktycznie się zmieni, wykryjesz go poprawnie.

Nie wiem na pewno, dlaczego oryginalna próba nie działa, mimo że mój najlepszy przypuszczenie to, że jest to problem synchronizacji ze zdarzeniem onfocus wypalania asynchronicznie, a przed jego właściwości input sterowania zakończeniu aktualizacji.

UPDATE: Aby ustalić, co użytkownik wybrał za każdym razem zamknąć okno dialogowe pliku, nawet jeśli nic się nie zmieniło, kwestia rozrządu można omijała dodając krótkie opóźnienie pomiędzy odbiorem naciskiem ponownie i sprawdzając wartość wejście do pliku. Zamiast dzwonić pod numer checkOnCancel natychmiast po otrzymaniu fokusu, następująca wersja charge powoduje, że zostanie nazwana dziesiąta sekundy później.

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

Oto działająca wersja: http://jsfiddle.net/munderwood/6h2r7/2/.

Answer 2

Czy coś jest nie tak? Ponieważ fileSelectedEle.value zawsze zwraca poprzednią wartość wykonania, a NIE tę wybraną przez użytkownika. Czy jest to oczekiwane zachowanie pliku wejściowego? Jak rozwiązać ten problem, aby odczytać wybrany plik?

Nie ma nic złego, to jest oczekiwane zachowanie. Jeśli użytkownik anuluje proces wyboru pliku, to tak jakby nigdy go nie rozpoczął. Tak więc poprzednia wartość pozostaje na miejscu.

Answer 3

Możesz podłączyć się do zdarzenia window.focus, które zostanie uruchomione po anulowaniu okna wyboru pliku. Następnie sprawdź, czy rzeczywiście ma wybrany plik.