finden, wenn ‚Abbrechen‘ wurde auf Dateieingabe geklickt

Question

Ich habe versucht, einen Hack in verschiedenen Positionen beschrieben, die verwendet:

document.body.onfocus = checkOnCancel(); 

Ein Beispiel:

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

Gibt es etwas falsch hier? Weil fileSelectedEle.value immer den vorherigen Ausführungswert zurückgibt und NICHT den vom Benutzer ausgewählten. Ist dies das erwartete Verhalten der Eingabedatei? Wie löst man das, um die ausgewählte Datei zu lesen?

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

Sie können den Fehler reproduzieren von:

Schritt 1: select - einige wählen Sie eine Datei (und beachten Sie die Ausgabe)

Schritt 2: select - Presse abbrechen (und Bekanntmachung der Ausgang)

Answer 1

Eine Lösung ist die Verwendung des onchange Ereignisses der input.

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

Dies richtig zu Änderungen in den ausgewählten Dateinamen antwortet, wie Sie hier testen: http://jsfiddle.net/munderwood/6h2r7/1/

Der einzige mögliche Unterschied im Verhalten von der Art und Weise, es zu tun, Sie versuchen, ist, dass, wenn Sie kündigen Recht weg, oder zweimal hintereinander, oder wählen Sie die gleiche Datei zweimal hintereinander, dann wird das Ereignis nicht ausgelöst. Jedes Mal, wenn sich der Dateiname tatsächlich ändert, erkennen Sie ihn jedoch korrekt.

Ich weiß nicht genau, warum Ihr ursprünglicher Versuch nicht funktioniert hat, obwohl meine beste Vermutung ist, dass es ein Timing-Problem mit dem onfocus Ereignis asynchron feuert, und bevor die input Steuerelement-Eigenschaften die Aktualisierung abgeschlossen haben.

UPDATE: Um zu bestimmen, was der Benutzer jedes Mal, wenn sie die Datei Dialog zu schließen ausgewählt hat, auch wenn sich nichts geändert hat, kann das Timing-Problem wieder durch Zugabe einer kurzen Verzögerung zwischen dem Empfang Fokus umsäumte werden und überprüft den Wert von die Dateieingabe. Anstatt checkOnCancel sofort beim Empfangen des Fokus aufzurufen, bewirkt die folgende Version von charge, dass es eine Zehntelsekunde später aufgerufen wird.

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

Hier ist eine funktionierende Version: http://jsfiddle.net/munderwood/6h2r7/2/.

Answer 2

Ist hier etwas nicht in Ordnung? Da fileSelectedEle.value immer den vorherigen Ausführungswert und NICHT den vom Benutzer ausgewählten Wert zurückgibt. Ist dies das erwartete Verhalten der Eingabedatei? Wie löst man das, um die ausgewählte Datei zu lesen?

Es ist nichts falsch, das ist das erwartete Verhalten. Wenn der Benutzer den Dateiauswahlprozess abbricht, dann ist es so, als hätten sie ihn nie gestartet. Der vorherige Wert bleibt also bestehen.

Answer 3

Sie können in das Ereignis window.focus einhaken, das ausgelöst wird, wenn sie die Dateiauswahlbox des Fensters abbrechen. Überprüfen Sie dann, ob tatsächlich eine Datei ausgewählt ist.