Antworten auf deine Fragen:
Neues Thema erstellen

jQuery + jQuery-File-Upload Plugin

E

exo

Aktives Mitglied

Hallo 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
 

J

Jonnsn

fortgeschrittener

AW: jQuery + jQuery-File-Upload Plugin

Hi,

Gibts vielleicht ein minimalistisches lauffähiges Beispiel? Ich verstehe ehrlich gesagt das Problem nicht ganz, kann auch an mir liegen :). Ich habe das File-Upload-Plugin jedenfalls in einem größeren Projekt problemlos im Einsatz.

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ß
 
E

exo

Aktives Mitglied

AW: jQuery + jQuery-File-Upload Plugin

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....
 
J

Jonnsn

fortgeschrittener

AW: jQuery + jQuery-File-Upload Plugin

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ß
 
E

exo

Aktives Mitglied

AW: jQuery + jQuery-File-Upload Plugin

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 ;)
 
E

exo

Aktives Mitglied

AW: jQuery + jQuery-File-Upload Plugin

So jetzt hab ich alles da, also sieht wie folgt aus:

PHP: 
function loadContent(id){
    var content = $("#angebotcontent_"+id);    
   
    if( content.hasClass("loaded") == false)
    {
      content.load("functions/_rpc_content.php?id="+id, function(){
            loadArtikelList("artikel_content", id);
            console.log('Content geladen');
             
            $(document).bind('drop', function (e) {
                e.preventDefault();
                console.log(e);
                console.log($(e.target).children('#fileupload'));
                $(e.target).children('#fileupload').fileupload(
                'option',
                'fileInput',
                $('input:file')
              );
            });
            console.log();
          }).addClass("loaded").delay(800);
    }    
}

Der HTML Code für den Fileupload sieht wie folgt aus:

HTML: 
<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">&nbsp;</div>
            </div>
        </div>
        <!-- The loading indicator is shown during file processing -->
        <div class="fileupload-loading"></div>
 
J

Jonnsn

fortgeschrittener

AW: jQuery + jQuery-File-Upload Plugin

Hi,
Gibt dir denn
HTML: 
console.log($(e.target).children('#fileupload'));
Elemente aus?

Versuche mal
HTML: 
$(e.target).children('#fileupload').fileupload( 
                fileInput: $('input:file')
              );
Denn mit
HTML: 
fileupload('option','xxx','yyy');
änderst du imo die Option xxx eines bestehenden (bereits intialisiertem) Fileupload.

Gruß
 
E

exo

Aktives Mitglied

AW: jQuery + jQuery-File-Upload Plugin

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....
 
Zuletzt bearbeitet:
J

Jonnsn

fortgeschrittener

AW: jQuery + jQuery-File-Upload Plugin

ok ich hab mir das eben nochmal genauer angesehen

Du lädst deine Inhalte per Ajax und fügst sie mit
PHP: 
loadArtikelList("artikel_content", id);
vermutlich dem DOM hinzu.
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: 
$(e.target).children('#fileupload').fileupload(
                fileInput: $('input:file')
              );
zu diesem Zeitpunkt initialisieren....
Wieso erst beim drop? :uhm:
Fehlt da Code (Was passiert in loadArtikelList())?

Wenn ich deine Anforderungen richtig verstanden habe, sollte das etwa so aussehen:
PHP: 
function loadContent(id){
    var content = $("#angebotcontent_"+id);    
   
    if( content.hasClass("loaded") == false)
    {
      content.load("functions/_rpc_content.php?id="+id, function(){
            loadArtikelList("artikel_content", id);
            // ACHTUNG: diueser Code wird parallel zu loadArtikelList() ausgeführt
            // Es ist also nicht sicher, dass der Inhalt bereits dem DOM hinzugefügt wurde.
            // daher sollte der folgende Code eher am Ende von loadArtikelList() oder in einer Callback-Funktion stehen....
            console.log('Content geladen');
             // NACHDEM der Inhalt dem DOM hinzugefügt wurde:
              // jQuery File Upload für das Formular mit der ID #fileupload  initialisieren(eine ID ist eindeutig, daher kann man sich das children() sparen...)
              $('#fileupload').fileupload();
              // zusätzliche Optionen setzen (ginge auch schon bei der Initialisierung)
              $('#fileupload').fileupload('option',{
                     'fileInput': $('input:file'),
                     url: 'hier-sollen-die-files-hin.php'
              });
              // Ab jetzt sollte der Upload prinzipiell funktionieren
          }).addClass("loaded").delay(800);
    }    
}
Bei diesem Beispiel kann es, wie in den Kommentaren angemerkt allerdings sein, dass der Upload zu früh initialisiert wird.

Der Demo nach ist auch für DRAG-DROP-Support keine weitere Konfiguration nötig. Lediglich die entsprechenden jQuery Bibliotheken müssen eingebunden sein.

Das hören auf drop wird das Plugin schon selber machen.

Hoffe das hilft weiter.
 
E

exo

Aktives Mitglied

AW: jQuery + jQuery-File-Upload Plugin

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: 
<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: 
function loadContent(id){
    var Content = $("#content_"+id);    
   
    if( Content.hasClass("loaded") == false)
    {
      Content.load("functions/_rpc_content.php?id="+id, function(){
            loadArtikelList("artikel_content", id);
            console.log('Content geladen');             
            console.log($('#fileupload'));
            $('#fileupload').fileupload();
              
              $('#fileupload').fileupload('option',{
                     'fileInput': $('input:file'),
                     url: 'hier-sollen-die-files-hin.php'
              });

          }).addClass("loaded").delay(800);
    }    
}

_rpc_content.php (Content der nachgeladen wird - hier nur das Formular um was es geht)
HTML: 
<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">&nbsp;</div>
            </div>
        </div>
        <!-- The loading indicator is shown during file processing -->
        <div class="fileupload-loading"></div>

Vielleicht siehst du ja eventuell noch einen Fehler, bin jetzt auch schon ein paar Tage an der
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
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 110 (Mitglieder: 5, Gäste: 105)
Robots: 911

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben