Wie funktioniert letscrate.com?

Tim Eipert · 9. März 2011, 17:01

Hi,
ich hab beim surfen die Seite letscrate.com/ entdeckt. Dort kann man (Ich jedenfalls, Betriebsystem: Ubuntu 10.10 Maverick Meerkat) Dateien hosten, indem man sie z.B. vom Desktop in die Kiste schiebt, alles per Drag'n'Drop. Sind wir schon so weit? Geht das mit Javascript? Wenn ja, wie?

vince · 9. März 2011, 22:51

Tim Eipert schrieb:

Geht das mit Javascript? Wenn ja, wie?

jein ... schau mal hier developer.mozilla.org/en/DOM/FileReader

mad · 9. März 2011, 23:38

Auf jeden Fall sehr cool und endlich intuitiv. Bin gespannt, wann mehr Browser das umsetzen und ob alle Browser sicherheitstechnisch damit klar kommen...

Tim Eipert · 10. März 2011, 08:42

Genial, danke!

Torben Brodt · 10. März 2011, 09:01

Übrigens geht das bei Google Mail in beide Richtungen. Glaube aber nicht, dass beim Upload FileReader benutzt wird.
Das wird einfach nur ein input type=file befüllen und mit onchange das Formular automatisch abschicken.
Wie der Download funktioniert kann ich mir im Moment auch nicht erklären. Zumindest nicht, wie der Download im richtigen Ordner gespeichert wird. Vermutlich wird der Download nur pauschal gestartet und bei den meisten Browsern ist der Desktop eben die Standardeinstellung

Diesen Download könnte man triggern wenn window mit onmousedown/ondrag verlassen wird und danach window ohne diese Einstellung wieder betreten wird.

Drag and drop attachments to save them to your desktop
Drag and drop attachments onto messages

vince · 10. März 2011, 10:10

Ich hab mal ein bisschen mit rumgespielt und einen Drop-Multiuploader gebastelt. Einfach mehrere Dateien in den Browser "droppen".

Achtung, die Dateinhalte werden im Browser dargestellt, also am besten keine Bilder reinschrieben

jQuery hab ich als Hilfsmittel nur aus Bequemlichkeit benutzt.

Das Beispiel funkt momentan wg. des FileReaders nur im Chrome, Firefox & (Safari).

Quellcode

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>FileReader MUP</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div style="margin:50px;">
<script type="text/javascript" >
$(document).ready(function(){
var uploadTarget = document.getElementById("uploader");
uploadTarget.addEventListener("dragenter" , dragenter , false);
uploadTarget.addEventListener("dragleave" , dragleave , false);
uploadTarget.addEventListener("dragover" , dragover , false);
uploadTarget.addEventListener("drop" , drop , false);
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
$("#uploader").css("background","#000");
$("#uploader").html("<img src='http://www.loadinfo.net/images/preview/18_clock_five_24.gif?1200916238' />");
return false;
}
function dragover(e) {
e.stopPropagation();
e.preventDefault();
return false;
}
function dragleave(e) {
e.stopPropagation();
e.preventDefault();
$("#uploader").css("background","black");
$("#uploader").text("DROP FILE HERE");
return false;
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
var files = dt.files;
jQuery.each(files ,function(){
var reader = new FileReader();
reader.onload = function(e) {
$('#showUpload').append('FILE: ' + e.target.result + '<br /><br />');
};
reader.readAsText(this);
});
return false;
}
});
</script>
<div id="uploader" style="margin:auto;width:60px;height:60px;background:#000;color:#FFF;padding:100px;">DROP FILE HERE</div>
<div id="showUpload"></div>
</div>
</body>
</html>

Alles anzeigen

Torben Brodt · 10. März 2011, 18:54

Ich hoffe du wirst für das kommenden Ostergewinnspiel (*geheim*) einen Wiki Beitrag dazu erstellen

Wie funktioniert letscrate.com?

Wie funktioniert letscrate.com?

Tim Eipert schrieb:

Quellcode

Teilen

Tags