Drag'n'Drop-Textdatei

Ich möchte, dass gelöschte Textdateien nach ihrem Inhalt oder ihrer vollständigen Position angezeigt werden, damit ich den Inhalt dieser Position in die "drop_zone" laden kann.Drag'n'Drop-Textdatei

Das habe ich bis jetzt. Ich war nur in der Lage die Dateinamen für den Zugriff auf:

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

Quelle

2012-08-31 Meysam Feghhi

hier ist der letzte Code:

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

Quelle

2012-08-31 12:06:28

http://www.html5rocks.com/en/tutorials/file/dndfiles/ sollte eine gute Ressource sein. Sie müssen einen FileReader verwenden, um den Inhalt der Datei als String zu lesen.

Quelle

2012-08-31 11:10:16 Maz

Aufgrund von Sicherheitsbeschränkungen ist eine Seite nicht in der Lage, Inhalte von Dateien zu laden, ohne dass ein Java-Applet mit entsprechenden Berechtigungen eingerichtet ist. und selbst dann ist es nicht möglich.

Das heißt jedoch nicht, dass es unmöglich ist; Laden Sie die Datei einfach auf einen Server hoch und geben Sie den Inhalt an den Browser zurück. So funktionieren viele Webanwendungen vom Typ Textbearbeitung.

Wie Sie dies implementieren, bleibt Ihnen überlassen.

Weiter, wie Maz darauf hingewiesen hat, können Sie auch integrierte APIs verwenden, um Ihnen zu helfen, was Sie versuchen zu tun. Beachten Sie jedoch, dass diese Lösung nicht unbedingt browserübergreifend kompatibel ist.

Quelle

2012-08-31 11:12:18 Qix

Drag'n'Drop-Textdatei

Antwort

Verwandte Themen