Modificar Archivo en input type file

tellezcoo · #1 (**permalink**) 22/04/2015, 09:14

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 ;)

Carlangueitor · #2 (**permalink**) 22/04/2015, 10:00

¿Y ya viste si hay errores en la consola?

tellezcoo · #3 (**permalink**) 22/04/2015, 10:30

Cita:

Iniciado por Carlangueitor

¿Y ya viste si hay errores en la consola?

Si, y no sale nada,

Bueno pues creo que ya encontre el problema, googleando encontre esto http://stackoverflow.com/questions/1...les-manipulate al parecer google chrome y todo el que use el motor, permiten la escritura, pero en el link referencian que este es de solo lectura (read), bueno pues firefox y otros si respetaron esa limitación y a chrome le valio