web-dev-qa-db-fra.com

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

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

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

javascripthtmlformsjavascript-events
153
dronus

Définissez la valeur de input sur null pour chaque événement onclick. Cela réinitialisera la valeur de input et déclenchera l'événement onchange 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: Il est normal que votre fichier porte le préfixe 'C:\fakepath \'. C'est une fonctionnalité de sécurité qui empêche JavaScript de connaître le chemin absolu du fichier. Le navigateur le sait toujours en interne.

217
Brian Ustas
<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 correctement avec return false;

Voici un VIOLON

17
elshnkhll

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énement à '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.

7
Xacur Aphrantus

Faites ce que vous voulez faire après le chargement du fichier avec succès. Après la fin du traitement de votre fichier, définissez la valeur du contrôle de fichier sur string.so. comme par exemple vous pouvez faire cette chose et a travaillé 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.
    });
1
Mohit Singh

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

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

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

Utiliser TypeScript

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