javascript - guardar - seleccionar archivo html

Evento de selección de archivo de entrada HTML que no se activa al seleccionar el mismo archivo

Question

¿Hay alguna posibilidad de detectar cada selección de archivos que el usuario realizó para una input HTML de tipo elemento de file ?

Esto se preguntó muchas veces antes, pero el evento de cambio usualmente propuesto no se inicia si el usuario vuelve a seleccionar el mismo archivo.

Answer 1

En este artículo, bajo el título "Usar 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 aunque elija el mismo archivo y no si lo cancela.

Answer 2

Establezca el valor de la input en null en cada evento onclick . Esto restablecerá el valor de la input y activará el evento onchange 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 todavía lo conoce internamente.

Answer 3

<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 una FIDDLE