web-dev-qa-db-fra.com

Annuler l'événement sur le type d'entrée = "fichier"

Je travaille avec une entrée de fichier standard pour les téléchargements et je cherche un moyen d'attacher une fonction à un événement lorsque l'utilisateur clique/clique sur le bouton "Annuler" (ou s'échappe) de la boîte de dialogue Choisir un fichier.

Je ne trouve aucun événement qui fonctionne sur tous les navigateurs et plates-formes de manière cohérente.

J'ai lu les réponses à cette question: Capture d'événement d'annulation sur le type d'entrée = fichier mais ils ne fonctionnent pas, car l'événement de changement ne se déclenche pas dans la plupart des navigateurs lors de l'annulation du fichier choisi dialogue.

Je recherche une solution js pure, mais également ouverte aux solutions jquery.

Quelqu'un résout ce problème avec succès?

javascriptjqueryfile-upload
15
GWR

Un peu de recherche indique qu'il n'y a aucun moyen de détecter quand Annuler est sélectionné dans la fenêtre de dialogue Sélection de fichier. Vous pouvez utiliser onchange ou onblur pour vérifier si des fichiers ont été sélectionnés ou si quelque chose a été ajouté à l'entrée value.

Cela pourrait ressembler à: https://jsfiddle.net/Twisty/j18td9cs/

[~ # ~] html [~ # ~] 

<form>
  Select File:
  <input type="file" name="test1" id="testFile" />
  <button type="reset" id="pseudoCancel">
    Cancel
  </button>
</form>

JavaScript 

var inputElement = document.getElementById("testFile");
var cancelButton = document.getElementById("pseudoCancel");
var numFiles = 0;

inputElement.onclick = function(event) {
  var target = event.target || event.srcElement;
  console.log(target, "clicked.");
  console.log(event);
  if (target.value.length == 0) {
    console.log("Suspect Cancel was hit, no files selected.");
    cancelButton.onclick();
  } else {
    console.log("File selected: ", target.value);
    numFiles = target.files.length;
  }
}

inputElement.onchange = function(event) {
  var target = event.target || event.srcElement;
  console.log(target, "changed.");
  console.log(event);
  if (target.value.length == 0) {
    console.log("Suspect Cancel was hit, no files selected.");
    if (numFiles == target.files.length) {
      cancelButton.onclick();
    }
  } else {
    console.log("File selected: ", target.value);
    numFiles = target.files.length;
  }
}

inputElement.onblur = function(event) {
  var target = event.target || event.srcElement;
  console.log(target, "changed.");
  console.log(event);
  if (target.value.length == 0) {
    console.log("Suspect Cancel was hit, no files selected.");
    if (numFiles == target.files.length) {
      cancelButton.onclick();
    }
  } else {
    console.log("File selected: ", target.value);
    numFiles = target.files.length;
  }
}


cancelButton.onclick = function(event) {
  console.log("Pseudo Cancel button clicked.");
}

Je suggère de créer votre propre bouton d'annulation ou de réinitialisation qui réinitialise le formulaire ou efface la valeur de l'entrée.

12
Twisty