ejemplo - Agregue el archivo caído a una entrada de archivo usando jQuery

jquery file upload ejemplo

Question

Tengo una entrada de archivo personalizada:

<div id="wrapper">
    <span id="fake-text-input"></span>
    <button id="select-a-file"></button>
    <input id="hidden-file-input" type="file" />
</div>

La input[type="file"] está oculta ( display: none ) y la selección de un archivo se realiza escuchando / disparando el click y change eventos.

También quiero apoyar la extracción de archivos. Pude escuchar el evento de drop cuando se deja caer un archivo en #fake-text-input pero no sé cómo reenviar el evento de drop a la input[type="file"] ... ¿es posible?

No me interesan los trucos de opacidad de entrada de archivos :)

$(''body'').on(''drop'', ''#wrapper'', function(e) {
    var file = e.originalEvent.dataTransfer.files[0];

    // I have the file.. now what?
});

Answer 1

Esto se trabajó conmigo en google chrome, el problema ahora con otros navegadores

$("input[type=''file'']").prop("files", e.originalEvent.dataTransfer.files);