L'événement de sélection du fichier d'entrée HTML ne se déclenche pas lors de la sélection du même fichier

Y a-t-il une chance de détecter chaque sélection de fichier effectuée par l'utilisateur pour un élément HTML inputde type file?

Cela a été demandé plusieurs fois auparavant, mais l' onchangeévénement généralement proposé ne se déclenche pas si l'utilisateur sélectionne à nouveau le même fichier.

Définissez la valeur de inputto nullsur chaque onclickévénement. Cela réinitialisera la inputvaleur de et déclenchera l' onchangeévénement même si le même chemin est sélectionné.

input.onclick = function () {
    this.value = null;
};

input.onchange = function () {
    alert(this.value);
};​

Voici une DÉMO .

Remarque: C'est normal si votre fichier est préfixé par 'C: \ fakepath \'. C'est une fonction de sécurité qui empêche JavaScript de connaître le chemin absolu du fichier. Le navigateur le sait toujours en interne.

<form enctype='multipart/form-data'>
    <input onchange="alert(this.value); this.value=null; return false;" type='file'>
    <br>
    <input type='submit' value='Upload'>
</form>

this.value=null; n'est nécessaire que pour Chrome, Firefox fonctionnera bien uniquement avec return false;

Voici un FIDDLE

Dans cet article, sous le titre "Utilisation de la saisie de formulaire pour la sélection"

http://www.html5rocks.com/en/tutorials/file/dndfiles/

<input type="file" id="files" name="files[]" multiple />

<script>
function handleFileSelect(evt) {

    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
     // Code to execute for every file selected
    }
    // Code to execute after that

}

document.getElementById('files').addEventListener('change', 
                                                  handleFileSelect, 
                                                  false);
</script>

Il ajoute un écouteur d'événements pour «changer», mais je l'ai testé et il se déclenche même si vous choisissez le même fichier et non si vous annulez.

Utilisez l'événement onClick pour effacer la valeur de l'entrée cible, chaque fois que l'utilisateur clique sur le champ. Cela garantit que l'événement onChange sera également déclenché pour le même fichier. A travaillé pour moi :)

onInputClick = (event) => {
    event.target.value = ''
}

<input type="file" onChange={onFileChanged} onClick={onInputClick} />

Utilisation de TypeScript

onInputClick = ( event: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
    const element = event.target as HTMLInputElement
    element.value = ''
}

Faites ce que vous voulez faire après le chargement réussi du fichier. Juste après la fin de votre traitement de fichier, définissez la valeur du contrôle de fichier sur une chaîne vide. Ainsi, le .change () sera toujours appelé même si le nom du fichier change ou non. comme par exemple, vous pouvez faire cette chose et travailler pour moi comme un charme

   $('#myFile').change(function () {
       LoadFile("myFile");//function to do processing of file.
       $('#myFile').val('');// set the value to empty of myfile control.
    });

handleChange({target}) {
    const files = target.files
    target.value = ''
}

Effacer la valeur du 0ème indice d'entrée a fonctionné pour moi . Veuillez essayer le code ci-dessous, j'espère que cela fonctionnera (AngularJs).

          scope.onClick = function() {
            input[0].value = "";
                input.click();
            };