Establecer el elemento del archivo de entrada con el archivo usando la API de archivos HTML5

Question

Estoy usando un elemento de archivo de entrada para cargar archivos en mi página JSP. El usuario puede cargar el archivo haciendo clic en un botón que abre un formulario con el botón de navegación del navegador

Ahora, deseo cargar el archivo mediante la función de arrastrar y soltar de HTML5 (como se describe en html5 rocks page). Puedo extraer el nombre de archivo usando File API. ¿Hay alguna manera de cargar el elemento de archivo de entrada con el archivo eliminado usando File API? (Para que pueda usar el mismo comportamiento para cargar el archivo)

Answer 1

No hay manera de establecer el valor de <input type=file> directamente en JS. Esa acción requiere la intervención del usuario (y un clic en un selector de archivos). Sin embargo, puede usar xhr.send(FormData) o xhr.send(File) para enviar los archivos. Véase mi respuesta aquí:

HTML5 File API readAsBinaryString reads files as much larger, different than files on disk

En el controlador de la gota, apenas pas la FileList obtenida de evt.dataTransfer.files a que uploadFiles() ayudante.

Answer 2

es de hecho imposible manejar cualquier cosa relacionada con el cliente en javascript. Sin embargo, podría use the file api to convert the image to base64. A continuación, puede enviar este valor al servidor a través de un formulario y un valor de entrada oculto (o uno creado con javascript), decodifíquelo en php o en el idioma del lado del servidor que esté utilizando y guárdelo como un archivo de imagen.

Answer 3

Pude establecer el atributo "archivos" del elemento de entrada con los archivos propiedad del objeto dataTransfer.

document.getElementById ("insertar archivo de entrada id"). Files = evt.dataTransfer.files;

Intenté usar getelement.value y lo errores. Establezca la propiedad de archivos con la lista de archivos.

Happy Programming!

Kremnari