Ajax Upload mit JQuery

[koma05]

bin auf der suche nach einem ajax-upload-skript.
dabei bin ich mehrfach auf folgendes gestossen: Ajax upload - demo dazu: Ajax upload demo

den beispielcode habe ich nun bei mir zum test eingebunden. der upload scheint zu funktionieren, nur wird das upload.php skript nicht aufgerufen.

folgender codeausschnitt ist im beispiel enthalten:

$(document).ready(function(){

    /* example 1 */
    var button = $('#button1'), interval;
    new AjaxUpload(button,{
        //action: 'upload-test.php', // I disabled uploads in this example for security reasons
        action: 'upload.htm', 
        name: 'myfile',
        onSubmit : function(file, ext){

habe ihn geändert in:

$(document).ready(function(){

    /* example 1 */
    var button = $('#button1'), interval;
    new AjaxUpload(button,{
        action: 'upload.php', // I disabled uploads in this example for security reasons
        name: 'myfile',
        onSubmit : function(file, ext){

jetzt müsste ja die action die upload.php aufrufen. passiert aber nicht.

nutzt jemand diese ajax apload skript? hab ich was übersehen?

 

[Stefan]

AW: Ajax Upload mit JQuery

Kenne ich nicht, probiere das mal, wenn Du das hinbekommst wäre das auch für mich interessant

 

[Tim1901091]

AW: Ajax Upload mit JQuery

new AjaxUpload(button,{
//action: 'upload-test.php', // I disabled uploads in this example for security reasons
action: 'upload.htm',


Ich weiß nicht genau wie die Methode AjaxUpload aufgebaut ist, aber anscheinend erwartet die ne Reihe von Parametern. In dem Beispiel wird die auskommentierte erste Datei mit einem Komma abgetrennt und übergeben! Vielleicht liegts daran.
Also erstell eifnach nochmal irgenden Kommentar oder so, der als "Parameter" übergeben wird.

Java zumindest meckert bei sowas zumindest immer.

 

[koma05]

AW: Ajax Upload mit JQuery

habs nun rausbekommen.
es wird schon in die upload.php gegangen. hab mal einen simplen js-alert eingebaut.
dann bin ich der sache auf den grund gegangen.

$(document).ready(function(){

    /* example 1 */
    var button = $('#button1'), interval;
    new AjaxUpload(button,{
        action: 'upload.php', // I disabled uploads in this example for security reasons
        name: 'myfile',
        onSubmit : function(file, ext){

bei name steht "myfile" und in der upload.php wird

$uploaddir . basename($_FILES['userfile']['name']);

verwendet.
userfile in myfile geändert und schon wird die hochgeladene datei verschoben...

Kenne ich nicht, probiere das mal, wenn Du das hinbekommst wäre das auch für mich interessant

er nutzt mootools (und nicht jquery)
die uploadgeschichte dort, schaut aber auch gut aus... mal sehen

 

[Stefan]

AW: Ajax Upload mit JQuery

Aber wie kann ich darauf reagieren, wenn die Datei erfolgreich hochgeladen wurde? Möchte dann ein Formular absenden. Hm?

 

[koma05]

AW: Ajax Upload mit JQuery

denke, man kann mit jquery-anweisungen darauf reagieren.
im beispiel wird nach erfolgriechen upload "onComplete" aufgerufen:
also im beispiel:

        onComplete: function(file, response){
            button.text('Upload');
                        
            // enable upload button
            this.enable();
            
            // add file to the list
            $('<li></li>').appendTo('#example1 .files').text(file);     
   
            $("#bildanzeigen").html('<img src="img/'+file+'" alt="upload erfolgreich" / >');
            $("#bildanzeigen").show();
        }

hier wird halt das hochgeladene bild einer liste

$('<li></li>').appendTo('#example1 .files').text(file);

hinzugefügt.

und ich habe zum test hinzugefügt, dass das hochgeladene bild gleich angezeigt wird

$("#bildanzeigen").html('<img src="img/'+file+'" alt="upload erfolgreich" / >');
            $("#bildanzeigen").show();

man kann auch festlegen welche dateitypen hochgeladen werden dürfen:

        onSubmit : function(file, ext){
            if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
                    // extension is not allowed
                    alert('Error: nicht erlaubter Dateityp!');
                    // cancel upload
                    return false;
            }

und in der upload.php kann man ja auch noch was einbauen.
so schaut sie im moment aus:

<?
$uploaddir = 'img/';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);

//move_uploaded_file ist die Standard PHP-Funktion um Dateien auf dem Server zu verarbeiten
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
  echo "success";
} else {
  // Als echo keinesfalls false benutzen. Führt zu Konflikten mit dem Ajax-Request
  echo "error";
}
?>

 

[Stefan]

AW: Ajax Upload mit JQuery

Und wie meinst Du, könnte ich dieses Teil sinnvoll hier integrieren:



Weil am besten wäre es ja, das sobald der Upload funktioniert hat erst der Button zum Absenden aktiviert wird und es auch nicht möglich ist, mehrere Dateien hochzuladen sondern immer nur eine pro Absenden des Formulars.

 

[koma05]

AW: Ajax Upload mit JQuery

den upload-button kann man mittels

this.disable();

sperren und mit

this.enable();

wieder aktivieren.

hab mal den js-code ein wenig gestutzt:

        new AjaxUpload(button,{
            action: 'upload.php',
            data: {
                ms : '<? echo $_GET['ms']; ?>'              
              },
            name: 'userfile',
            onSubmit : function(file, ext){
                if (! (ext && /^(jpg)$/.test(ext))){
                        // extension is not allowed
                        alert('Error: nicht erlaubter Dateityp!');
                        // cancel upload
                        return false;
                }
           

                // If you want to allow uploading only 1 file at time,
                // you can disable upload button
                this.disable();


            },
            onComplete: function(file, response){

                if (response != "error") { //upload erfolgreich
   
...

                    this.enable(); // enable upload button                
                    
                }//response 
                else { // upload nicht erfolgreich
                    
                    ....

                }//else
            }
        });

Und wie meinst Du, könnte ich dieses Teil sinnvoll hier integrieren:

auf dieser seite sind 3 uploads. bin mir im mom nicht sicher ob dies mit mehreren upload-element auf einer seite funktioniert. ich teste mal...

 

[koma05]

AW: Ajax Upload mit JQuery

sooo...
hab nun mal eine testseite mit 3 uploads zum test gebastelt.
dabei habe ich mich an die 3 uploadformulare von orientiert.

• beim ersten upload können grafikdateien (jpg, png, gif) hochgeladen werden. die datei darf max 300x200px groß sein.
• beim zweiten upload können nur gif-grafiken hochgeladen werden. die datei darf max 50x50px groß sein.
• beim dritten upload können nur zip oder rar-archive hochgeladen werden.

da meine domain noch nicht auf php 5.3 läuft, habe ich mal die relevanten dateien in ein archiv gepackt.

eine live-demo macht keinen sinn. grund: zum erkennen des mime-types wird folgende funktion verwendet:

$finfo = finfo_open(FILEINFO_MIME_TYPE);

mit dieser funktion kann man wohl am zuverlässigsten den mime-typ ermitteln. diese funktion steht jedoch erst ab php5.3 standardmässig zur verfügung.
lokal unter xampp läuft es perfekt - auf dem server fehlt hingegen die funktion.

diese funktion kommt bei dem 3. upload zum einsatz. es wird geprüft ob es ein zip- oder rar-archiv ist. später kann man es - oder besser noch - man sollte wenn es auf dem server zum einsatz kommt, alle hochgeladenen dateien damit prüfen, nicht dass man eine manipulierte datei untergejubelt bekommt. aber jetzt zum test habe ich darauf verzichtet.

du kannst es ja mal anschauen... bei fragen helfe ich gerne weiter...

 

[Stefan]

AW: Ajax Upload mit JQuery

Hi koma05,

im Grunde schon sehr gut, nur hätte ich es gerne mit einer Prozessbar - Anzeige in % (), weil sonst bringt mir das nicht kaum Vorteile gegenüber der vorhandenen Version. Wäre genial, wenn Du das auch noch hinbekommst!

 

[koma05]

AW: Ajax Upload mit JQuery

Hi koma05,

im Grunde schon sehr gut, nur hätte ich es gerne mit einer Prozessbar - Anzeige in % (), weil sonst bringt mir das nicht kaum Vorteile gegenüber der vorhandenen Version. Wäre genial, wenn Du das auch noch hinbekommst!

die prozessbar haut auf der angegebenen seite nicht hin!
habe zum test ein ca 1.1mb großes bild hochgeladen. die prozessbar war innerhalb von ca 3 sek auf 100%.
da ich aber mit knapp 20kb/s uploade, kann das nicht stimmen!

 

[Stefan]

AW: Ajax Upload mit JQuery

ist ja komisch, weil bei mir ging es ... hm ...

 

[koma05]

AW: Ajax Upload mit JQuery

weiß nicht wie weit ihr an euerer neuen seite schon seit... weil auf der neuen seite von aboutpixel.de wird eine prima upload-technik eingesetzt.
die bildgröße wird gleich erkannt und auch ein genauer fortschrittsbalken mit zeitanzeige ist vorhanden
welche technik allerdings dahinter steckt kann ich nicht sagen