Arrastrar y soltar desde el sistema de archivos en una aplicación web

Question

Estoy investigando en un framework/techno web que permite arrastrar y soltar archivos desde el sistema de archivos a una aplicación web. El objetivo es, por supuesto, cargar esos archivos en un servidor de aplicaciones.

En Flex parece que no es posible (aunque funciona con AIR). He encontrado una forma con Google Gears, pero esto obliga al usuario a instalar Gears como un complemento del navegador.

Con un applet de Java, parece posible, pero requiere que el usuario acepte una excepción de regla de seguridad ... (me resulta extraño ya que leer un archivo especificado por el usuario a través de DnD no es "menos seguro" que si el usuario hubiera especificado el archivo a través del cuadro de diálogo de carga clásica estándar ...).

¿Hay alguna forma no intrusiva de permitir esta característica, sin instalar ningún complemento y sin aceptar un cuadro de mensaje de advertencia de seguridad?

Answer 1

Nº

navegadores por lo general no tienen soporte para este tipo de cosas incorporada.

Answer 2

Firefox 3.6 y al parecer la última Safari (tal vez Webkit noche) apoyar esto a través de HTML5. He estado jugando con él recientemente y funciona bastante bien. El ejemplo que hice simplemente inserta miniaturas en la página, pero esto podría ajustarse para cargar los datos en un servidor. Aquí está el código/jQuery JavaScript escribí, no dude en utilizar esto:

function debug(string) { 
    $("#debugArea").append(string); 
} 

$(function() { 
    // We need to override the dragover event, otherwise Firefox will just open the file on drop 
    $("#dropArea").bind("dragover", function(event) { 
    event.preventDefault(); 
    }); 

    // This is where the actual magic happens :) 
    $("#dropArea").bind("drop", function(event) { 
    event.preventDefault(); 
    debug("Dropped something: "); 
    // Since jquery returns its own event object, we need to get the original one in order to access the files 
    var files = event.originalEvent.dataTransfer.files; 
    // jquery nicely loops for us over the files 
    $(files).each(function(index, file) { 
    if(!file.type.match(/image.*/)) { // Skip non-images 
     debug(file.name) 
     debug(" <em>not an image, skipping</em>; "); 
     return; 
     } 

     // We need a new filereader for every file, otherwise the reading might be canceled by the next file 
     var filereader = new FileReader(); 
     filereader.onloadend = function(event) { $("#thumbnails").append("<img src='"+event.target.result+"' width='100px' />"); }; 
     debug(file.name); 
     debug("; "); 

     // Read the file in data URL format so that we can easily add it to an img tag. 
     filereader.readAsDataURL(file); 
    }); 
    debug("<br/><br/>"); 
    }) 

}); 

Y el código HTML para ello:

<div id="dropArea"> 
    <p>Drop images here!</p> 
</div> 
<div id="thumbnails"> 
</div> 
<div id="debugArea"> 
    <strong>Debug Info:</strong><br/> 
</div> 

Answer 3

esto es ahora posible mediante el uso del HTML5 File API.

• muchas soluciones llave en mano/Ejemplos:
  • http://www.freshdesignweb.com/jquery-html5-file-upload.html
• Una biblioteca para hacerlo rápida & fácil:
  • https://code.google.com/p/html5uploader/
• Un tutorial más técnico está disponible aquí :
  • http://www.sitepoint.com/html5-file-drag-and-drop/ (demo)

Incluso es posible drag & drop folders.