Hola estoy intentando modificar la propiedad "files" de un <input type="file"> desde javascript a partir de un Drag and Drop "Arrastrar y soltar" archivos a un <div>
hice un ejemplo que funciona bien en Google Chrome y navegadores basados en el motor que usa este.. pero en Firefox e Internet Explorer no funciona.
Les dejo el codigo de ejemplo
Código HTML:
<html>
<body>
<style>
#holder.hover { border: 10px dashed #0c0 !important; }
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<form method="post">
<input type="file" id="archivo" multiple ><br /><br />
<textarea id="fileDragName" rows="4" cols="50"></textarea><br /><br />
<div id="holder" align="center" style="width:200px; height:200px; border: 10px dashed #ccc">
Arrastre Archivos!
</div>
</form>
<script>
function readfiles(files) {
$('#archivo').prop("files", files); // set desde jquery
document.getElementById('archivo').files = files; // set desde javascript
for (var i = 0; i < files.length; i++) {
document.getElementById('fileDragName').value += files[i].name + "\n";
}
var files = document.getElementById("archivo").files; // archivos en el input
alert("Cantidad de Archivos: " + files.length);
}
var holder = document.getElementById('holder');
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
this.className = '';
e.preventDefault();
readfiles(e.dataTransfer.files);
}
</script>
</body>
</html> Para probarlo, arrastra cualquier archivo y sueltalos en el área, al final envia una alerta con la cantidad de archivos que se asignaron al input, vuelvo y digo en Google Chrome si funciona pero no lo logro en Firefox...
Hay dos instrucciones, una en javascript y otra usando Jquery que hacen lo mismo, esta comentariado
Espero me puedan ayudar ;)