Przeciągnij i upuść plik tekstowy

Chcę, aby upuszczone pliki tekstowe były wyświetlane według ich zawartości lub ich pełnej lokalizacji, tak, że mogę załadować zawartość tej lokalizacji do "drop_zone".Przeciągnij i upuść plik tekstowy

To jest to, co mam do tej pory. Byłem w stanie uzyskać dostęp do nazwy pliku:

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

Źródło

2012-08-31 Meysam Feghhi

tutaj jest ostatni kod:

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

Źródło

2012-08-31 12:06:28

http://www.html5rocks.com/en/tutorials/file/dndfiles/ powinien być dobrym źródłem informacji. Musisz użyć FileReadera, aby odczytać zawartość pliku jako ciąg.

Źródło

2012-08-31 11:10:16 Maz

Ze względu na ograniczenia bezpieczeństwa strona nie może załadować zawartości plików bez ustawionego apletu Java z odpowiednimi uprawnieniami; a nawet wtedy nie jest to zbyt możliwe.

Jednak nie oznacza to, że jest to niemożliwe; po prostu prześlij plik na serwer i powtórz zawartość z powrotem do przeglądarki. Tak funkcjonuje wiele aplikacji internetowych do edycji tekstu.

Sposób wdrożenia tego należy do Ciebie.

Co więcej, jak zaznaczył Maz, można również korzystać z wbudowanych interfejsów API, aby pomóc Ci w wykonaniu tego, co chcesz zrobić. Pamiętaj jednak, że to rozwiązanie niekoniecznie jest zgodne z wieloma przeglądarkami.

Źródło

2012-08-31 11:12:18 Qix

Przeciągnij i upuść plik tekstowy

Odpowiedz

Powiązane problemy