Estoy intentando implementar la carga de múltiples archivos HTML5 nativos mediante el método de arrastrar y soltar. He estado siguiendo tutoriales como http://onehub.com/blog/posts/designing-an-html5-drag-drop-file-uploader-using-sinatra-and-jquery-part-1/ y http://www.html5rocks.com/en/tutorials/file/dndfiles/ pero todavía no he encontrado la solución que necesito.Crear archivo arrastrar y soltar subir div, para que funcione como un tipo de entrada = "archivo"
Básicamente quiero simular la funcionalidad de un elemento de entrada de carga de múltiples archivos HTML5, pero con un div en la bruja escucho los eventos de caída.
En otras palabras, quiero hacer una forma como ésta:
<form method="post" action="somesscript.php" enctype="multipart/form-data">
<input type="text" />
<div class="drop">
<p>Drop files here</p>
</div>
<input type="submit" />
</form>
trabajo como si estuviera hecha de esta manera:
<form method="post" action="somesscript.php" enctype="multipart/form-data">
<input type="text" />
<input name="filesToUpload[]" type="file" multiple />
<input type="submit" />
</form>
El arrastrar y soltar campo debe ser entendido como parte del formulario, y cuando se envíe el formulario, solo deseo que todos los datos de las entradas y el conjunto de archivos del campo de arrastrar y soltar se envíen a través de AJAX al servidor.
Hasta ahora solo he implementado la lectura de los nombres de los archivos en un evento drop. Quiero que todos los archivos abandonados se agreguen a una matriz, pero no sé cómo acceder a los archivos en sí, no a sus atributos, para que este último pueda enviar esta matriz de archivos en el formulario enviado a través de AJAX junto con el resto del datos de formulario.
Quiero algo como:
var data = e.originalEvent.dataTransfer,
files = data.files,
filesArray = [],
filesLength = files.length,
i;
for (i = 0; i < filesLength; i++) {
var file = files[i];
filesArray.push(file);
}
return filesArray;
Además, soy consciente de que hay plugins para esto, pero quiero hacerlo nativa.
¿Alguna vez encontrar una solución, @Husar? – Barney
Sí, guardo los archivos en una matriz. El único problema fue enviar con AJAX junto con el resto de los campos del formulario. Me las arreglé para hacer esto usando la funcionalidad FormData (https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData). – Maverick