Drag & Drop Multiuploader mit jQuery

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

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

    Quellcode

    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>
    9. <script type="text/javascript">
    10. $(document).ready(function() {
    12. var uploadTarget = document.getElementById("uploader");
    14. uploadTarget.addEventListener("dragenter" , dragenter , false);
    15. uploadTarget.addEventListener("dragleave" , dragleave , false);
    16. uploadTarget.addEventListener("dragover" , dragover , false);
    17. uploadTarget.addEventListener("drop" , drop , false);
    19. function dragenter(e) {
    20. e.stopPropagation();
    21. e.preventDefault();
    22. $("#uploader").html("<img src='http://www.loadinfo.net/images/preview/18_clock_five_24.gif?1200916238' />");
    23. return false;
    24. }
    26. function dragover(e) {
    27. e.stopPropagation();
    28. e.preventDefault();
    29. return false;
    30. }
    32. function dragleave(e) {
    33. e.stopPropagation();
    34. e.preventDefault();
    35. $("#uploader").text("DROP FILE HERE");
    36. return false;
    37. }
    39. function drop(e) {
    40. e.stopPropagation();
    41. e.preventDefault();
    43. var dt = e.dataTransfer;
    44. var files = dt.files;
    45. jQuery.each(files, function(){
    46. var reader = new FileReader();
    47. reader.onload = function(e) {
    48. $('#showUpload').append('FILE: ' + e.target.result + '<br /><br />');
    49. };
    50. reader.readAsText(this);
    51. });
    52. $("#uploader").text("DROP FILE HERE");
    53. return false;
    54. }
    55. });
    56. </script>
    58. <div id="uploader" style="margin:auto;width:60px;height:60px;background:#000;color:#FFF;padding:100px;">DROP FILE HERE</div>
    59. <div id="showUpload"></div>
    61. </body>
    62. </html>
    Alles anzeigen


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

    11.261 mal gelesen