Lokale Datei Drag'n'Drop mit HTML/JavaScript erkennen

Es gibt eine HTML-Textarea. Ich kann dieses Ereignis abfangen, wenn eine lokale Datei in den Textbereich gezogen und dort abgelegt wird. Aber Wie bekomme ich den Namen der abgelegten Datei? (Um in das Textfeld schließlich modifiziert und eingefügt werden.)Lokale Datei Drag'n'Drop mit HTML/JavaScript erkennen

Die folgenden Ausdrücke Keine in diesem Fall zurückgibt:

event.dataTransfer.files 
event.dataTransfer.getData('text/plain')

ich ein kurzes Beispiel für Firefox 3 gemacht, dass meine Zielplattform zur Zeit ist.

<script> 
function init() { 
    document.getElementById('x').addEventListener('drop', onDrop, true) 
} 
function onDrop(event) { 
    var data = event.dataTransfer.getData('text/plain') 
    event.preventDefault() 
    alert('files: ' + event.dataTransfer.files + ' && data: ' + data + '.') 
} 
</script> 

<body onload='init()'> 
<textarea cols=70 rows=20 id='x'></textarea>

Quelle

2010-01-07 Pavel Vlasov

Ich möchte lokalen Dateipfad ondrop. – Kishan

Das ist ein bisschen spät - aber ich denke, was Sie suchen dafür ist:

event.dataTransfer.files[0].name

Sie können auch die folgenden Eigenschaften erhalten:

event.dataTransfer.files[0].size 
event.dataTransfer.files[0].type

und Sie können diese Dateien Schleife durch mit den folgenden:

var listOfNames=''; 
for(var i=0,tot=event.dataTransfer.files.length; i<tot; i++){ 
    listOfNames+=event.dataTransfer.files[i].name + '\r\n'; 
}

Btw - wenn Sie jQuery verwenden, dann können die Daten-Transfer-Objekt hier:

event.originalEvent.dataTransfer.files[0].name

Quelle

2012-09-27 13:46:24 Jimmery

Ich möchte lokalen Dateipfad ondrop. – Kishan

Sie werden es finden, wenn Sie das Dateiobjekt mit der Konsole loggen, verwenden Sie etwas wie (vorausgesetzt, Sie verwenden jQuery): 'console.log (event.originalEvent.dataTransfer.files [0])' – Jimmery

-3

Sie können es aus Sicherheitsgründen nicht mit Javascript machen. Javascript VM hat keinen direkten Zugriff auf Betriebssystem-Dateisystem. Sie können Text nur per Drag & Drop verschieben.

Quelle

2010-01-07 09:57:58 alemjerus

Aber es ist kein gewöhnlicher Direktzugriff: Ein Benutzer legt die Datei nach eigenem Wunsch ab. Und eine Anwendung braucht nur einen Dateinamen, nicht mehr. Was ist hier falsch? Zum Beispiel ist der folgende visuelle Editor * in der Lage *, den Namen der gelöschten Datei zu erhalten (Sie müssen leider eingeloggt sein): http://www.livejournal.com/update.bml und es besteht immer noch aus HTML. –

Nicht mehr wahr. Jeder Browser, der eine dataTransfer.files hat, kann den Dateinamen lesen. – Jimmery

-2

Alemjerus ist korrekt, Sie haben keinen Zugriff auf das, was Sie suchen.

Das Verhalten, das Sie als Antwort auf seinen Kommentar angegeben haben, ist das Standardverhalten bestimmter Browser. Wenn ich zum Beispiel mit dem stackoverflow -Textarea für diesen Eintrag Safari verwende und eine Datei hinein ziehe, wird der Pfad der Datei in den Textbereich verschoben. Bei Firefox 3.5 dagegen versucht es, die Datei mit dem Browser zu öffnen.

Grundsätzlich ist die "Drag & Drop" -Funktion, die Sie implementieren möchten, vom Browser und Betriebssystem auf dem Client-Computer gehandhabt - Sie können Javascript für diesen Zweck nicht verwenden.

Quelle

2010-01-08 22:14:14 Skone

Ich weiß über die Existenz der Sicherheit in JS. Aber Sie und alemjerus sind in diesem speziellen Fall falsch. Installieren Sie Firefox 3.6 und das pure html/js Beispiel auszuführen: https://developer.mozilla.org/En/DragDrop/DataTransfer#Example Und Sie werden nicht nur Namen, sondern seine Inhaltsdatei zugreifen können je . Die einzige Sache, die ich noch nicht herausgraben kann, ist, wie man den * vollständigen * Dateipfad erhält ... –

alemjerus und Skone ** waren ** in der Tat richtig. Der lokale Dateizugriff wurde in Firefox 3.6 (https://developer.mozilla.org/en-US/Firefox/Releases/3.6#HTML) hinzugefügt, der ursprünglich am 21. Januar 2010 veröffentlicht wurde (http://en.wikipedia.org/ wiki/Firefox_3.6) nachdem sie ihre Antworten gepostet haben. Ein Feature auf Stackoverflow, um veraltete Antworten zu markieren, wäre großartig. –

so weit ich weiß, müssen Sie eine Instanz von nsIFile erhalten, um den Dateipfad zu erhalten (die File Klasse bietet diese Funktion nicht).
Diese MDC-Seite erläutert, wie Sie dies tun: https://developer.mozilla.org/En/DragDrop/Recommended_Drag_Types#file.
Beachten Sie, dass das Erlangen einer nsIFile Instanz, obwohl nicht im vorherigen Link aufgeführt, eine Eskalation von Berechtigungen erfordert (siehe meine Antwort auf Can I drag files from the desktop to a drop area in Firefox 3.5 and initiate an upload? zeigen, wie dies zu tun ist).

Quelle

2010-03-09 16:51:45

MDC ... meinen Sie MDN :-) –

im tut es von

Mouseover- und mousedown- über die „Drop“ Zone Erkennung

Quelle

2012-01-17 14:55:49 jsbuster

Sie wissen nicht, ob es noch relevant ist, aber ich vor dem gleichen Problem. Hier ist, wie ich es gelöst:

erstellen normales Upload-Formular mit einem einzigen Eingabefeld (type = "file")
Fügen Sie dieses HTML-Attribut in das Eingabefeld:

Dropzone = "copy Datei: image/png-Datei: image/jPG-Datei: image/jpeg Drop "-Event auf dem Eingabefeld“
Sets JQuery Hörer oder was auch immer das fangen"

Wenn Sie & ziehen, wird ein lokales Bild in das Eingabefeld eingefügt. Das Attribut "value" wird automatisch ausgefüllt und Sie können es wie jedes andere HTML-Formular verarbeiten.

Ich wickelte auch das Formular in ein anderes HTML-Element (div), legte die Größe des div und Überlauf: über CSS versteckt - auf diese Weise können Sie die Schaltfläche "Durchsuchen" loswerden. Es ist nicht nett, aber es funktioniert.Ich habe auch das AjaxForm Plugin verwendet, um das Bild im Hintergrund hochzuladen - funktioniert sehr gut.

Quelle

2012-03-06 18:34:53

"Wenn Sie ein lokales Bild per Drag & Drop in das Eingabefeld ziehen, wird das Attribut" value "automatisch ausgefüllt und Sie können es wie jedes andere HTML-Formular bearbeiten." Können Sie das bitte erläutern besser? Ich habe versucht, aber ich kann nicht verstehen, wie man den Wert auf die Input-Typ-Datei setzt. Sollte dies nicht wegen einiger Sicherheitsrisiken verweigert werden? –

Soweit ich mich erinnere, müssen Sie nichts explizit tun. Für die Verarbeitung des Formulars mit dem Bild ist es jedoch erforderlich, dass das Eingabefeld einen Wert aufweist. Dieser Wert kann nicht über Javascript gesetzt werden. Wenn Sie das Bild jedoch per Drag & Drop in das Eingabefeld ziehen, wird das Attribut "value" automatisch gesetzt und das Formular kann gesendet werden. –

Lokale Datei Drag'n'Drop mit HTML/JavaScript erkennen

Antwort

Verwandte Themen