Arrastrar y soltar el archivo de texto

Quiero que los archivos de texto caídos se muestren por sus contenidos o su ubicación completa para que pueda cargar los contenidos de esa ubicación en el "drop_zone".Arrastrar y soltar el archivo de texto

Esto es lo que tengo hasta ahora. Estaba a poder tener acceso al nombre de archivo:

<html> 
<head> 
    <title></title> 
</head> 
<body> 
<textarea id="drop_zone">Drop files here</textarea> 
<output id="list"></output> 

<script> 
    function handleFileSelect(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 

    var files = evt.dataTransfer.files; // FileList object. 
    document.getElementById('drop_zone').innerHTML = files[0].name; 
    } 

    function handleDragOver(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy. 
    } 

    // Setup the dnd listeners. 
    var dropZone = document.getElementById('drop_zone'); 
    dropZone.addEventListener('dragover', handleDragOver, false); 
    dropZone.addEventListener('drop', handleFileSelect, false); 
</script> 
</body> 
</html>

Fuente

2012-08-31 Meysam Feghhi

aquí es el código final:

<html> 
<head> 
    <title></title> 
</head> 
<body> 
<textarea id="drop_zone">Drop files here</textarea> 
<script> 
    function handleFileSelect(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 

    var files = evt.dataTransfer.files; // FileList object. 
    var reader = new FileReader(); 
    reader.onload = function(event) {    
     document.getElementById('drop_zone').value = event.target.result; 
    }   
    reader.readAsText(files[0],"UTF-8"); 
    } 

    function handleDragOver(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy. 
    } 

    // Setup the dnd listeners. 
    var dropZone = document.getElementById('drop_zone'); 
    dropZone.addEventListener('dragover', handleDragOver, false); 
    dropZone.addEventListener('drop', handleFileSelect, false); 
</script> 
</body> 
</html>

Fuente

2012-08-31 12:06:28

http://www.html5rocks.com/en/tutorials/file/dndfiles/ debería ser un buen recurso. Necesita usar un FileReader para leer el contenido del archivo como una Cadena.

Fuente

2012-08-31 11:10:16 Maz

Debido a los límites de seguridad, una página no puede cargar el contenido de los archivos sin algo así como un applet de Java configurado con los permisos apropiados; y, incluso entonces, no es posible.

Sin embargo, eso no quiere decir que sea imposible; simplemente cargue el archivo en un servidor y repita el contenido en el navegador. Así es como funcionan muchas aplicaciones web de edición de texto.

Cómo implementar esto depende de usted.

Además, como ha señalado Maz, también puede usar las API integradas para ayudarlo a hacer lo que está tratando de hacer. Tenga en cuenta, sin embargo, que esta solución no es necesariamente compatible con varios navegadores.

Fuente

2012-08-31 11:12:18 Qix

Arrastrar y soltar el archivo de texto

Respuesta

Cuestiones relacionadas