Frage Wie erkennt man, wenn bei der Dateieingabe auf Abbrechen geklickt wird?


Wie kann ich erkennen, wenn der Benutzer eine Dateieingabe mit Hilfe einer HTML-Dateieingabe abbricht?

onChange lässt mich erkennen, wenn sie eine Datei auswählen, aber ich möchte auch wissen, wenn sie abbrechen (schließen Sie die Datei wählen Sie Dialogfeld, ohne etwas auszuwählen).


76
2018-01-07 17:46


Ursprung


Antworten:


Es ist zwar keine direkte Lösung, aber auch schlecht, da es nur (soweit ich es getestet habe) mit onfocus arbeitet (was eine ziemlich limitierende Ereignisblockierung erfordert), kann man es mit folgendem erreichen:

document.body.onfocus = function(){ /*rock it*/ }

Das Schöne daran ist, dass Sie es rechtzeitig mit dem Dateiereignis anhängen / lösen können, und es scheint auch gut mit verborgenen Eingaben zu funktionieren (ein definitives Plus, wenn Sie einen visuellen Workaround für den fehlerhaften Standardeingabetyp verwenden = Datei'). Danach müssen Sie nur herausfinden, ob sich der Eingabewert geändert hat.

Ein Beispiel:

var godzilla = document.getElementById('godzilla')

godzilla.onclick = charge

function charge()
{
    document.body.onfocus = roar
    console.log('chargin')
}

function roar()
{
    if(godzilla.value.length) alert('ROAR! FILES!')
    else alert('*empty wheeze*')
    document.body.onfocus = null
    console.log('depleted')
}

Sehen Sie es in Aktion: http://jsfiddle.net/Shiboe/yuK3r/6/

Leider scheint es nur auf Webkit-Browsern zu funktionieren. Vielleicht kann jemand anderes die Firefox / IE-Lösung herausfinden


32
2018-04-01 05:38



Du kannst nicht.

Das Ergebnis des Dateidialogs wird nicht dem Browser angezeigt.


17
2018-01-07 17:47



/* Tested on Google Chrome */
$("input[type=file]").bind("change", function() {
    var selected_file_name = $(this).val();
    if ( selected_file_name.length > 0 ) {
        /* Some file selected */
    }
    else {
        /* No file selected or cancel/close
           dialog button clicked */
        /* If user has select a file before,
           when they submit, it will treated as
           no file selected */
    }
});

7
2017-10-26 19:01



Wenn Sie eine Datei auswählen und auf Öffnen / Abbrechen klicken, wird die input Element sollte Fokus verlieren aka blur. Angenommen, die Initiale value des input ist leer, jeder nicht leere Wert in Ihrem blur Handler würde ein OK anzeigen, und ein leerer Wert würde ein Abbrechen bedeuten.

UPDATE: Die blur wird nicht ausgelöst, wenn der input ist versteckt. Daher kann dieser Trick bei IFRAME-basierten Uploads nicht verwendet werden, es sei denn, Sie möchten den Link vorübergehend anzeigen input.


6
2017-12-19 22:13



Sie können den Abbruch abfangen, wenn Sie dieselbe Datei wie zuvor auswählen und in diesem Fall auf Abbrechen klicken.

Du kannst es so machen:

<input type="file" id="myinputfile"/>
<script>
document.getElementById('myinputfile').addEventListener('change', myMethod, false);
function myMethod(evt) {
  var files = evt.target.files; 
  f= files[0];
  if (f==undefined) {
     // the user has clicked on cancel
  }
  else if (f.name.match(".*\.jpg")|| f.name.match(".*\.png")) {
     //.... the user has choosen an image file
     var reader = new FileReader();
     reader.onload = function(evt) { 
        try {
        myimage.src=evt.target.result;
            ...
         } catch (err) {
            ...
         }
     };
  }     
  reader.readAsDataURL(f);          
</script>

5
2017-12-15 00:50



Hören Sie sich das Click-Event an.

Nach Shiboes Beispiel folgt hier ein jQuery-Beispiel:

var godzilla = $('#godzilla');
var godzillaBtn = $('#godzilla-btn');

godzillaBtn.on('click', function(){
    godzilla.trigger('click');
});

godzilla.on('change click', function(){

    if (godzilla.val() != '') {
        $('#state').html('You have chosen a Mech!');    
    } else {
        $('#state').html('Choose your Mech!');
    }

});

Sie können es hier in Aktion sehen: http://jsfiddle.net/T3Vwz


5
2018-06-25 16:33



Shiboes Lösung wäre eine gute Lösung, wenn es mit dem mobilen Webkit funktioniert, tut es aber nicht. Was ich mir vorstellen kann, ist das Hinzufügen eines mouse move Ereignis-Listeners zu einem dom-Objekt zu dem Zeitpunkt, zu dem das Dateieingabefenster geöffnet wird, wie folgt:

 $('.upload-progress').mousemove(function() {
        checkForFiles(this);
      });
      checkForFiles = function(me) {
        var filefield = $('#myfileinput');
        var files = filefield.get(0).files;
        if (files == undefined || files[0] == undefined) $(me).remove(); // user cancelled the upload
      };

Das mouse move-Ereignis wird von der Seite blockiert, während das Dateidialogfeld geöffnet ist, und wenn es geschlossen ist, überprüft es, ob sich irgendwelche Dateien in der Dateieingabe befinden. In meinem Fall möchte ich einen Aktivitätsindikator haben, der Dinge blockiert, bis die Datei hochgeladen wird. Daher möchte ich nur meinen Indikator beim Abbrechen entfernen.

Dies löst jedoch nicht für Mobilgeräte, da keine Maus zum Verschieben vorhanden ist. Meine Lösung dort ist weniger als perfekt, aber ich denke, es ist gut genug.

       $('.upload-progress').bind('touchstart', function() {
        checkForFiles(this);
      });

Jetzt hören wir auf eine Berührung auf dem Bildschirm, um die gleichen Dateien zu überprüfen. Ich bin ziemlich zuversichtlich, dass der Finger des Benutzers ziemlich schnell auf dem Bildschirm angezeigt wird, nachdem er abgebrochen und der Aktivitätsindikator entfernt wurde.

Man könnte auch einfach den Aktivitätsindikator zum Ereignis der Dateieingabeänderung hinzufügen, aber auf dem Handy gibt es oft ein paar Sekunden Verzögerung zwischen der Auswahl des Bildes und dem Auslösen des Änderungsereignisses, also ist es einfach viel besser UX für den Aktivitätsindikator, der bei angezeigt wird Beginn des Prozesses.


2
2018-01-17 04:59



Die meisten dieser Lösungen funktionieren nicht für mich.

Das Problem ist, dass man nie weiß, welches Ereignis ausgelöst wird, ist es click oder ist es change? Sie können keine Reihenfolge annehmen, da dies wahrscheinlich von der Implementierung des Browsers abhängt.

Zumindest in Opera und Chrome (Ende 2015) click wird ausgelöst, bevor Eingaben mit Dateien gefüllt werden, so dass Sie nie die Länge von files.length != 0 bis du zögerst click danach ausgelöst werden change.

Hier ist Code:

var inputfile = $("#yourid");

inputfile.on("change click", function(ev){
    if (ev.originalEvent != null){
        console.log("OK clicked");
    }
    document.body.onfocus = function(){
        document.body.onfocus = null;
        setTimeout(function(){
            if (inputfile.val().length === 0) console.log("Cancel clicked");
        }, 1000);
    };
});

2
2018-01-07 19:32



Am einfachsten prüfen Sie, ob sich Dateien im temporären Speicher befinden. Wenn Sie das Änderungsereignis jedes Mal erhalten möchten, wenn der Benutzer auf die Dateieingabe klickt, können Sie es auslösen.

var yourFileInput = $("#yourFileInput");

yourFileInput.on('mouseup', function() {
    $(this).trigger("change");
}).on('change', function() {
    if (this.files.length) {
        //User chose a picture
    } else {
        //User clicked cancel
    }
});

2
2018-01-16 15:56