HTML5 Arrastrar y colocar: Cargar archivo de texto en un cuadro de texto con JavaScript

Question

Quiero permitir a los usuarios arrastrar y soltar (o seleccionar) un archivo desde su computadora y cargarlo en un cuadro de texto con JavaScript.

¿Es posible cargar un archivo local con JavaScript en un cuadro de texto? ¿Si es así, entonces cómo?

Answer 1

creo que todo lo que quieras para HTML5 se incluye en remy/html5demos en github.

Como ejemplo, modifiqué http://html5demos.com/file-api para aceptar archivos de texto y mostrarlos en el navegador.

Ver el jsfiddle.

Editar
guión pertinente:

// modified from http://html5demos.com/file-api 
var holder = document.getElementById('holder'), 
    state = document.getElementById('status'); 

if (typeof window.FileReader === 'undefined') { 
    state.className = 'fail'; 
} else { 
    state.className = 'success'; 
    state.innerHTML = 'File API & FileReader available'; 
} 

holder.ondragover = function() { 
    this.className = 'hover'; 
    return false; 
}; 
holder.ondragend = function() { 
    this.className = ''; 
    return false; 
}; 
holder.ondrop = function(e) { 
    this.className = ''; 
    e.preventDefault(); 

    var file = e.dataTransfer.files[0], 
     reader = new FileReader(); 
    reader.onload = function(event) { 
     console.log(event.target); 
     holder.innerText = event.target.result; 
    }; 
    console.log(file); 
    reader.readAsText(file); 

    return false; 
};​ 

Answer 2

Mira la HTML5 File API: http://www.html5rocks.com/en/tutorials/file/dndfiles/

La especificación también tiene un buen ejemplo para tener una idea de cómo funciona:

http://dev.w3.org/2006/webapi/FileAPI/#introduction