Trascinare n 'file di testo

Desidero che i file di testo rilasciati vengano mostrati dal loro contenuto o dalla loro posizione completa in modo che possa caricare il contenuto di quella posizione nella "drop_zone".Trascinare n 'file di testo

Questo è quello che ho finora. Ero solo in grado di accedere al nome del file:

<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>

fonte

2012-08-31 Meysam Feghhi

qui è il codice finale:

<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>

fonte

2012-08-31 12:06:28

http://www.html5rocks.com/en/tutorials/file/dndfiles/ dovrebbe essere una buona risorsa. È necessario utilizzare un FileReader per leggere il contenuto del file come una stringa.

fonte

2012-08-31 11:10:16 Maz

A causa dei limiti di sicurezza, una pagina non è in grado di caricare il contenuto dei file senza qualcosa come un'applet Java configurata con autorizzazioni appropriate; e, anche allora, non è troppo possibile.

Tuttavia, questo non vuol dire che sia impossibile; semplicemente carica il file su un server e rimanda il contenuto al browser. Ecco come funzionano molte applicazioni web di tipo text-editing.

Come si implementa questo dipende da voi.

Inoltre, come Maz ha sottolineato, è anche possibile utilizzare le API integrate per aiutarti a fare ciò che stai cercando di fare. Tuttavia, questa soluzione non è necessariamente compatibile con browser diversi.

fonte

2012-08-31 11:12:18 Qix

Trascinare n 'file di testo

risposta

Problemi correlati