Drag & Drop Multiuploader mit jQuery

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • Ich stelle hier ein Script für ein Drag&Drop Multiuploader vor.
    (jQuery wird so wenig wie möglich als kleine Hilfe eingesetzt so.)
    == Erläuterung ==
    Bei dem Script gibt es ein zentrales Div ((ID|#)uploader), wo man Dateien aus einem Ordner direkt in den Browser ziehen und "droppen" kann.
    Zusätzlich gibt es ein weiteres Div ((ID|#)showUpload), wo der Inhalt der hochgeladenen Dateien angezeigt wird. Zum testen sollte man also aufpassen was man dragged, da bei sehr großen Dateien der gesamte Inhalt im Browser ausgegeben wird und dadurch der Browser in die Knie gezwungen werden kann.


    === EventListener ===
    Dem Div#uploader werden zuerst verschiedene Listener (enter,leave,over,drop) zugewiesen.

    Die Listener dragenter, dragover und dragleave beschreiben den "Hover" mit dem ausgewählten Element über dem div.
    Heisst, draged man eine Datei über das Div, so wird die Action dragenter aufgerufen, welche dem Div ein Loadimage hinzufügt und den defaulttext (hier: "DROP FILE HERE") überschreibt.

    Die Funktion dragover wird nicht genutzt.

    Dragleave wird aufgerufen, wie der Name es schon vermuten lässt, wenn man mit der Maus (immer mit "gedragdem" Element) das Div verlässt.

    Drop ist die interessante Funktion wo die Datei(en) hochgeladen, ausgelesen und ausgegeben werden.

    Die Eventfunktionen stopPropagation stopt die Weitergabe des Events an untergeordnete DOM-Elemente. (Event bubbling)
    Genauere Informationen über Event bubbling & capturing gibt es hier.

    Die Eventfunktionen preventDefault unterbindet jedes Standardverhalten eines Elementes und stoppt das Ereignis. (Wenn z.B ein Link geklickt wird)


    === DataTransfer und FileReader ===
    Das dataTransfer-Objekt enthält einen "Link" zu den "gedropten" Daten, welche in dem Attribut file als Array gespeichert sind.

    Mittels jQuery.each iterieren wir durch das gesamte filesArray und instanzieren für jedes Element einen FileReader, welcher für den Upload zuständig ist, den Inhalt überträgt und in diesem Fall gleich an das Div#showUpload anhängt.
    Weitere Methoden, Eigenschaften und die Stati können aus dem manual des FileReaders entnommen werden.

    Zum Schluss wird nur noch der Defaulttext "DROP FILE HERE" gesetzt und das Loadimage überschrieben.

    === Kompabilität ===
    Internet Explorer ---
    Firefox (Gecko) 3.6 (1.9.2)
    Opera ---
    Chrome 7
    Safari (webkit) 6 (533.8 )

    That´s it !

    == Script ==

    Source Code

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html>
    3. <head>
    4. <title>FileReader MUP</title>
    5. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
    6. </head>
    7. <body>
    8. <script type="text/javascript">
    9. $(document).ready(function() {
    10. var uploadTarget = document.getElementById("uploader");
    11. uploadTarget.addEventListener("dragenter" , dragenter , false);
    12. uploadTarget.addEventListener("dragleave" , dragleave , false);
    13. uploadTarget.addEventListener("dragover" , dragover , false);
    14. uploadTarget.addEventListener("drop" , drop , false);
    15. function dragenter(e) {
    16. e.stopPropagation();
    17. e.preventDefault();
    18. $("#uploader").html("<img src='http://www.loadinfo.net/images/preview/18_clock_five_24.gif?1200916238' />");
    19. return false;
    20. }
    21. function dragover(e) {
    22. e.stopPropagation();
    23. e.preventDefault();
    24. return false;
    25. }
    26. function dragleave(e) {
    27. e.stopPropagation();
    28. e.preventDefault();
    29. $("#uploader").text("DROP FILE HERE");
    30. return false;
    31. }
    32. function drop(e) {
    33. e.stopPropagation();
    34. e.preventDefault();
    35. var dt = e.dataTransfer;
    36. var files = dt.files;
    37. jQuery.each(files, function(){
    38. var reader = new FileReader();
    39. reader.onload = function(e) {
    40. $('#showUpload').append('FILE: ' + e.target.result + '<br /><br />');
    41. };
    42. reader.readAsText(this);
    43. });
    44. $("#uploader").text("DROP FILE HERE");
    45. return false;
    46. }
    47. });
    48. </script>
    49. <div id="uploader" style="margin:auto;width:60px;height:60px;background:#000;color:#FFF;padding:100px;">DROP FILE HERE</div>
    50. <div id="showUpload"></div>
    51. </body>
    52. </html>
    Display All


    == Demo ==
    Ihr könnt euch Online eine Live Demo des Scripts anschauen. Ihr findet es hier: demo.easy-coding.de/javascript/drag-drop-multiuploader/

    6,556 times viewed