[HTML5] Drag and Drop funktioniert bei Dateien nicht

Parantatatam

mag Cookies & Kekse
Hallo Tutorianer,

lange Zeit hat es mich nicht mehr in dieses Forum getrieben, aber momentan bin ich einer Situation ausgeliefert, in der ich am liebsten allen W3C-Entwicklern, die an der Drag-and-Drop-API gearbeitet haben, gerne eine scheuern würde – das ist einfach nur Dreck, was sie da zusammen gebaut haben.

Kommen wir jedoch zu meinem aktuellen Problem: ich möchte eine Webapplikation schreiben, in der man mit lokalen Dateien arbeiten kann (momentan erstmal nur Musikdateien). Dazu soll man eine Datei per D&D in den Browser ziehen, damit ich sie dort weiter verarbeiten kann. Soweit die Idee. Ich bin momentan soweit, dass ich an zwei Stellen an der Vernunft der Entwickler zweifle: die erste Stelle ist, dass im Chrome 24.0.1312.68 das Event drop gar nicht ausgelöst wird. Allerdings hatte ich vor einigen Minuten mal eine Version, in der es kurioser Weise ging, da aber nur so, wie es in der momentanen Version im Firefox funktioniert. Das Problem ist hier aber, dass mir die Eigenschaft e.dataTransfer.files angezeigt wird, jedoch die Anzahl 0 ist. Das kann aber nicht sein, da dieses Ereignis gar nicht ausgelöst hätte werden können, wenn ich keine Datei dort abgelegt hätte – es ist einfach nur Unsinn!

Damit ihr auch einmal darüber schauen könnt, zeige ich euch natürlich mein Skript:
HTML:
<!DOCTYPE html>
<html>
<head>
  <title>drag and drop</title>
  <meta charset="utf-8" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script type="text/javascript">
    $(document).on("ready", function () {
      console.log("ready");
      var $droparea = $("#droparea");
      
      $droparea.on("click", function () {
        console.log("click");
      });
      
      $droparea.on("dragover", function (e) {
        e.preventDefault();
        e.stopPropagation();
        return false;
      });
      $droparea.on("dragenter", function (e) {
        e.preventDefault();
        e.stopPropagation();
        return false;
      });
      $droparea.on("drop", function (e) {
        e.preventDefault();
        e.stopPropagation();
        console.log(e.originalEvent.dataTransfer);
        return false;
      });
    });
  </script>
</head>
<body>
  <div id="droparea" style="width:300px;height:300px;background:green"></div>
</body>
</html>

Übrigens funktioniert folgendes in beiden Browsern, ich weiß nur nicht warum: http://jsfiddle.net/bwquR/26/
 
Zuletzt bearbeitet:
Also folgendes funktioniert bei mir in FF 18.0.2 und Chrome 24.0.1312.57
Javascript:
$droparea.on("drop", function (e) {
        e.preventDefault();
        e.stopPropagation();
		
		var dataTransfer = e.originalEvent.dataTransfer;
        var files = dataTransfer.files;
		for(var i = 0, f; f = files[i]; i++){
			var reader = new FileReader();
      
			reader.onload = function(e) {
					console.log(e.target.result);
			}
			reader.readAsText(dataTransfer.files[i]);
		}
        return false;
      });

Den Rest hab ich nicht angefasst.
 
Mh, das Kuriose daran ist, dass folgendes jetzt funktioniert: http://jsfiddle.net/MeiKatz/2vaGN/
Und auch das Skript oben funktioniert jetzt mit leichten Modifikationen im Firefox – aber Chrome streikt weiterhin.

Korrektur: der Link oben zu JSFiddle funktioniert weder in Firefox noch in Chrome. Ich habe momentan so viele Fenster offen, dass ich da wohl etwas verwechselt habe.
 
Zuletzt bearbeitet:
Ich habe den Fehler gefunden: Chrome hat wohl einen Bug, weshalb mir in der Konsole angezeigt wird, dass keine Dateien abgelegt wurde. Im gleichen Moment wird aber der korrekte Wert auf dem Bildschirm angezeigt, oder eben über alert(). Wer weiß warum, aber mit diesem Wissen, geht es jetzt in beiden Browsern.
 
Zurück