![]() |
|
|
Themen-Optionen |
|
|
#1
|
|
Helper
![]() ![]() Registriert seit: 17.04.2006
Ort: Lutherstadt Wittenberg
Beiträge: 356
Kamera: Canono EOS 50DVerwendet: Photoshop |
jQuery + jQuery-File-Upload PluginHallo Gemeinde,
ich habe hier ein kleines Problem. Und zwar sind wir hier am Basteln einer kleinen WaWi und wollen unseren Aufträgen Dateien hinterlegen. Soweit funktioniert das ganze auch, jedoch wollten wir die ganze Sache etwas vereinfachen (Multiupload/Drag 'n Drop etc.) und wollten gern das File-Upload-Plugin von BlueImp ( https://github.com/blueimp/jQuery-File-Upload/ ) einsetzen. Das Problem jetzt an der Sache ist, dass wir Vorab erst Content per jQuery/XHR laden, wo dann der Upload-Dialog mit einfließt und dann funktioniert natürlich die ganze Sache nicht mehr. Hat da eventuell schon jemand eine Lösung zu dem Problem oder auch eine kleine Anleitung, wie man das in diesem Speziellen Fall einbinden kann? Danke und Grüße Micha |
|
|
|
#2
|
|
fortgeschrittener
![]() Registriert seit: 08.02.2007
Beiträge: 28
Verwendet: Photoshop, Gimp, Illustrator, Inkscape, Notepad++, Eclipse, TYPO3
|
Hi,
Gibts vielleicht ein minimalistisches lauffähiges Beispiel? Ich verstehe ehrlich gesagt das Problem nicht ganz, kann auch an mir liegen Ist das Problem, dass das Upload Formular per Ajax nachgeladen wird? Da sehe ich kein Problem, die Uploads müssen eben nach dem Laden initialisiert werden. Gruß |
|
|
|
#3
|
|
Helper
![]() ![]() Themenstarter
Registriert seit: 17.04.2006
Ort: Lutherstadt Wittenberg
Beiträge: 356
Kamera: Canono EOS 50DVerwendet: Photoshop |
Hi Jonnsn,
also komme gerade an den Code nicht ran, weil der auf nen anderem Rechner liegt aber prinzipiell ist es so: 1. MainSite wird vollständig geladen 2. Content wird per klick Nachgeladen -> hier befindet sich dann auch das Plugin 3. Wenn ich jetzt per Drag n Drop etwas in das Formular ziehe passiert einfach nichts --> wenn ich eine Datei per Öffnen auswähle und dann das formular abschieße komm ich zum Target und man sieht auch die File-Infos der Datei Es funktioniert auch nicht, dass wie in der Plugin-Demo-Seite, wenn man per Drag n Drop dateien reinzieht, dass sich die Liste mit den Dateien aufbaut.... |
|
|
|
#4
|
|
fortgeschrittener
![]() Registriert seit: 08.02.2007
Beiträge: 28
Verwendet: Photoshop, Gimp, Illustrator, Inkscape, Notepad++, Eclipse, TYPO3
|
Zu welchem Zeitpunkt wird der Upload initialisiert (.fileupload())?
Wenn das bereits nach dem Laden der MainSite passiert, wird der nachgeladene Inhalt nie initialisiert werden und arbeitet wie ein normales Formular. Das müsste nach dem hinzufügen der neuen Inhalte passieren. Gruß |
|
|
|
#5
|
|
Helper
![]() ![]() Themenstarter
Registriert seit: 17.04.2006
Ort: Lutherstadt Wittenberg
Beiträge: 356
Kamera: Canono EOS 50DVerwendet: Photoshop |
also ich habe eine funktion "loadContent()" dort wird mittels click-event und jQuery - .load der Content nachgeladen und dann der fileupload() geladen...
Aber ich glaube wir kommen so oder so ohne den code nicht weiter und werd mich einfach dann nochmal melden wenn ich der Parat habe dann wirds glaub auch verständlicher |
|
|
|
#6
|
|
Helper
![]() ![]() Themenstarter
Registriert seit: 17.04.2006
Ort: Lutherstadt Wittenberg
Beiträge: 356
Kamera: Canono EOS 50DVerwendet: Photoshop |
So jetzt hab ich alles da, also sieht wie folgt aus:
PHP-Code:
HTML-Code:
<form id="fileupload" action="server/php/" method="POST" enctype="multipart/form-data"> <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload --> <div class="row fileupload-buttonbar"> <div class="span7"> <!-- The fileinput-button span is used to style the file input field as button --> <span class="btn btn-success fileinput-button"> <i class="icon-plus icon-white"></i> <span>Add files...</span> <input type="file" name="files[]" multiple> </span> <button type="submit" class="btn btn-primary start"> <i class="icon-upload icon-white"></i> <span>Start upload</span> </button> <button type="reset" class="btn btn-warning cancel"> <i class="icon-ban-circle icon-white"></i> <span>Cancel upload</span> </button> <button type="button" class="btn btn-danger delete"> <i class="icon-trash icon-white"></i> <span>Delete</span> </button> <input type="checkbox" class="toggle"> </div> <!-- The global progress information --> <div class="span5 fileupload-progress fade"> <!-- The global progress bar --> <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"> <div class="bar" style="width:0%;"></div> </div> <!-- The extended global progress information --> <div class="progress-extended"> </div> </div> </div> <!-- The loading indicator is shown during file processing --> <div class="fileupload-loading"></div> |
|
|
|
#7
|
|
fortgeschrittener
![]() Registriert seit: 08.02.2007
Beiträge: 28
Verwendet: Photoshop, Gimp, Illustrator, Inkscape, Notepad++, Eclipse, TYPO3
|
Hi,
Gibt dir denn HTML-Code:
console.log($(e.target).children('#fileupload'));
Versuche mal HTML-Code:
$(e.target).children('#fileupload').fileupload(
fileInput: $('input:file')
);
HTML-Code:
fileupload('option','xxx','yyy');
Gruß |
|
|
|
#8
|
|
Helper
![]() ![]() Themenstarter
Registriert seit: 17.04.2006
Ort: Lutherstadt Wittenberg
Beiträge: 356
Kamera: Canono EOS 50DVerwendet: Photoshop |
Also die Log gibt mir den gewünschten Bereich aus den ich haben will...
Ok das wusst ich nicht, hab die option mal rausgenommen, geht aber trotzdem nicht, es wird zwar wenn man eine datei rein droppt ein event registriert aber mehr passiert auch nicht.... bzw. ist mir soeben aufgefallen das im FF der Drop nicht registriert wurde sondern die datei einfach "geöffnet" wird. Im Chrome wird das preventDefault und es passiert erstmal nichts, mal abgesehen das der Log einen eintrag bekommt.... Geändert von exo (15.06.2012 um 18:40 Uhr). |
|
|
|
#9
|
|
fortgeschrittener
![]() Registriert seit: 08.02.2007
Beiträge: 28
Verwendet: Photoshop, Gimp, Illustrator, Inkscape, Notepad++, Eclipse, TYPO3
|
ok ich hab mir das eben nochmal genauer angesehen
Du lädst deine Inhalte per Ajax und fügst sie mit PHP-Code:
Dann registrierst du einen eventHandler der auf ein drop-Event hört und sobald dieses gefeuert wird, änderst du eine Option des fileuploads, bzw. inzwischen sollte du ihn mit PHP-Code:
Wieso erst beim drop? Fehlt da Code (Was passiert in loadArtikelList())? Wenn ich deine Anforderungen richtig verstanden habe, sollte das etwa so aussehen: PHP-Code:
Der Demo nach ist auch für DRAG-DROP-Support keine weitere Konfiguration nötig. Lediglich die entsprechenden jQuery Bibliotheken müssen eingebunden sein. http://blueimp.github.com/jQuery-File-Upload/ Das hören auf drop wird das Plugin schon selber machen. Hoffe das hilft weiter. |
|
|
|
#10
|
|
Helper
![]() ![]() Themenstarter
Registriert seit: 17.04.2006
Ort: Lutherstadt Wittenberg
Beiträge: 356
Kamera: Canono EOS 50DVerwendet: Photoshop |
Hi,
vielen Dank erst einmal für deine Ausführliche Hilfe... Leider will es immer noch nicht funktionieren. Im FF wird jetzt zwar die Standardfunktion des Browsers unterdrückt wie im Chrome so wie es sein soll, aber es geschieht einfach nichts. Auch die Buttons lassen sich nicht benutzen. Hier nochmal mein Code so wie es jetzt ausschaut: index.php HTML-Code:
<html> .... <body> .... <script id="template-upload" type="text/x-jquery-tmpl"> <tr class="template-upload{{if error}} ui-state-error{{/if}}"> <td class="preview"></td> <td class="name">${name}</td> <td class="size">${sizef}</td> {{if error}} <td class="error" colspan="2">Error: {{if error === 'maxFileSize'}}File is too big {{else error === 'minFileSize'}}File is too small {{else error === 'acceptFileTypes'}}Filetype not allowed {{else error === 'maxNumberOfFiles'}}Max number of files exceeded {{else}}${error} {{/if}} </td> {{else}} <td class="progress"><div></div></td> <td class="start"><button>Start</button></td> {{/if}} <td class="cancel"><button>Cancel</button></td> </tr> </script> <script id="template-download" type="text/x-jquery-tmpl"> <tr class="template-download{{if error}} ui-state-error{{/if}}"> {{if error}} <td></td> <td class="name">${namefdsa}</td> <td class="size">${sizef}</td> <td class="error" colspan="2">Error: {{if error === 1}}File exceeds upload_max_filesize (php.ini directive) {{else error === 2}}File exceeds MAX_FILE_SIZE (HTML form directive) {{else error === 3}}File was only partially uploaded {{else error === 4}}No File was uploaded {{else error === 5}}Missing a temporary folder {{else error === 6}}Failed to write file to disk {{else error === 7}}File upload stopped by extension {{else error === 'maxFileSize'}}File is too big {{else error === 'minFileSize'}}File is too small {{else error === 'acceptFileTypes'}}Filetype not allowed {{else error === 'maxNumberOfFiles'}}Max number of files exceeded {{else error === 'uploadedBytes'}}Uploaded bytes exceed file size {{else error === 'emptyResult'}}Empty file upload result {{else}}${error} {{/if}} </td> {{else}} <td class="preview"> {{if Thumbnail_url}} <a href="${url}" target="_blank"><img src="${Thumbnail_url}"></a> {{/if}} </td> <td class="name"> <a href="${url}"{{if thumbnail_url}} target="_blank"{{/if}}>${Name}</a> </td> <td class="size">${Length}</td> <td colspan="2"></td> {{/if}} <td class="delete"> <button data-type="${delete_type}" data-url="${delete_url}">Delete</button> </td> </tr> </script> <script src="js/jquery-1.7.2.js"></script> <script src="js/jquery-ui-1.8.18.custom.min.js"></script> <script src="js/jquery-ui-timepicker-addon.js"></script> <script src="http://blueimp.github.com/cdn/js/bootstrap.min.js"></script> <script src="http://blueimp.github.com/Bootstrap-Image-Gallery/js/bootstrap-image-gallery.min.js"></script> <!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included --> <script src="js/vendor/jquery.ui.widget.js"></script> <!-- The Templates plugin is included to render the upload/download listings --> <script src="http://blueimp.github.com/JavaScript-Templates/tmpl.min.js"></script> <script src="//ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> <!-- The Load Image plugin is included for the preview images and image resizing functionality --> <script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script> <!-- The Canvas to Blob plugin is included for image resizing functionality --> <script src="http://blueimp.github.com/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js"></script> <script src="js/jquery.livequery.js"></script> <!-- The Iframe Transport is required for browsers without support for XHR file uploads --> <script src="js/jquery.iframe-transport.js"></script> <!-- The basic File Upload plugin --> <script src="js/jquery.fileupload.js"></script> <!-- The File Upload file processing plugin --> <script src="js/jquery.fileupload-fp.js"></script> <!-- The File Upload user interface plugin --> <script src="js/jquery.fileupload-ui.js"></script> <!-- Laden der eigenen J-Scripte / Hier werden auch die content-funktionen geladen --> <script src="js/ws.js"></script> </body> </html> ws.js PHP-Code:
HTML-Code:
<form id="fileupload" action="server/php/" method="POST" enctype="multipart/form-data"> <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload --> <div class="row fileupload-buttonbar"> <div class="span7"> <!-- The fileinput-button span is used to style the file input field as button --> <span class="btn btn-success fileinput-button"> <i class="icon-plus icon-white"></i> <span>Add files...</span> <input type="file" name="files[]" multiple> </span> <button type="submit" class="btn btn-primary start"> <i class="icon-upload icon-white"></i> <span>Start upload</span> </button> <button type="reset" class="btn btn-warning cancel"> <i class="icon-ban-circle icon-white"></i> <span>Cancel upload</span> </button> <button type="button" class="btn btn-danger delete"> <i class="icon-trash icon-white"></i> <span>Delete</span> </button> <input type="checkbox" class="toggle"> </div> <!-- The global progress information --> <div class="span5 fileupload-progress fade"> <!-- The global progress bar --> <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"> <div class="bar" style="width:0%;"></div> </div> <!-- The extended global progress information --> <div class="progress-extended"> </div> </div> </div> <!-- The loading indicator is shown during file processing --> <div class="fileupload-loading"></div> Sache dran, aber irgendwie komm ich gar nicht weiter... //Edit wobei mir Chrome gerade jetzt zwei errors raushaut: Code:
Uncaught TypeError: Cannot read property 'support' of undefined /js/jquery.fileupload.js:33 Uncaught TypeError: Cannot read property 'blueimpFP' of undefined /js/jquery.fileupload-ui.js:38 Geändert von exo (16.06.2012 um 09:37 Uhr). |
|
![]() |
| Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1) | |
| Themen-Optionen | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| JQuery Plugin | Blurange | PHP und andere Scriptsprachen | 1 | 09.04.2012 14:45 |
| Seite mit JQuery verbessern ohne Kenntnisse von JQuery zu haben! | JannisL | PHP und andere Scriptsprachen | 3 | 05.05.2011 16:40 |
| Suche jQuery Plugin | dosonaro | PHP und andere Scriptsprachen | 2 | 16.01.2010 16:29 |
| Ajax Upload mit JQuery | koma05 | PHP und andere Scriptsprachen | 12 | 30.12.2009 22:50 |
| jquery forms file validate | saila | PHP und andere Scriptsprachen | 0 | 26.09.2009 11:50 |
-
Reklame
-
-
- Bilder richtig klein machen ...
- Spyder4Pro: Zwei Monitore an einem PC kalbrieren
- Droste Effekt unter CS6 Filter oder Plugin?
- t-online hompage Bilder werden nicht angezeigt
- Include gibt nichts aus
- Objekt nach "backen" verschoben und unstruktriert
- WPTouch Anwendungsbeispiele?
- Bestimmte Pixel in HTML anfragen
- Alpha-Maske schwarz statt transparent
- Fotoseite auf Homepage
- Fit machen für den Webbereich
- Wordpress Experten für längerfristige Zusammenarbeit gesucht
- Ist PSE die Lightversion von PS?
- Filter Topaz Clean
- CS6 Bridge - Programm auswählen, das geöffnet werden soll
- Schneller Blitz für Sportfotographie
- Neu hier - Freu mich hier zu sein...
- eigene Form nicht als Fläche extrudieren - sondern als Rohr
- gestern erst neu dazu gekommen
- Link aus InDesign zu Anker in PDF
-
-
Aktuelles Commag
Anzeige
-
-
- Abstimmen für [2D] Fortgeschrittenen Monatscontest Mai 2013
- Heute (20.05.) Webinar um 19.30 Uhr
- Abstimmen für 2. HDR/LDR-Fotocontest 2013 "Es war einmal" [Voting]
- Abstimmen für 21. Foto-Kreativcontest Gegensätze "hell-dunkel"
- Adobe Camera Raw 8.1 für CS6 auf Adobe Labs in einer Beta-Version
- News-Archiv
-
-
Anzeige









Social Media