El evento de selección del archivo de entrada HTML no se activa al seleccionar el mismo archivo

¿Hay alguna posibilidad de detectar cada selección de archivo que el usuario hizo para un elemento HTML inputde tipo file?

Esto se preguntó muchas veces antes, pero el onchangeevento generalmente propuesto no se dispara si el usuario selecciona el mismo archivo nuevamente.

Establezca el valor de inputa nullen cada onclickevento. Esto restablecerá el inputvalor de 's y activará el onchangeevento incluso si se selecciona la misma ruta.

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

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

Aquí hay una DEMO .

Nota: es normal si su archivo tiene el prefijo 'C: \ fakepath \'. Esa es una característica de seguridad que impide que JavaScript conozca la ruta absoluta del archivo. El navegador aún lo sabe internamente.

<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; solo es necesario para Chrome, Firefox funcionará bien solo con return false;

Aquí hay un violín

En este artículo, bajo el título "Uso de entrada de formulario para seleccionar"

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>

Agrega un detector de eventos para 'cambiar', pero lo probé y se dispara incluso si elige el mismo archivo y no si cancela.

Use el evento onClick para borrar el valor de la entrada objetivo, cada vez que el usuario hace clic en el campo. Esto asegura que el evento onChange se activará también para el mismo archivo. Trabajó para mi :)

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

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

Usando TypeScript

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

Haga lo que quiera hacer después de que el archivo se cargue correctamente. Justo después de completar el procesamiento de su archivo, establezca el valor del control de archivo en una cadena en blanco. Entonces, el .change () siempre se llamará incluso si el nombre del archivo cambia o no. por ejemplo, puedes hacer esto y funcionó para mí como encanto

   $('#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 = ''
}

Borrar el valor del índice 0 de entrada funcionó para mí . Por favor, intente el siguiente código, espero que esto funcione (AngularJs).

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