• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

PHP "echo" funktioniert nicht bei einem AJAX-Formular

J

j-l-n

Guest
Ich bräuchte eure Hilfe: Ich hatte ein Skript geschrieben, das die hochgeladenen Dateien verarbeitet (folgt mit ausführlichen Kommentaren).
Zum Upload habe ich ein stinkeinfaches HTML-Formular ohne irgendwelchen Schnick-Schnack geschrieben.

Nun hatte ich mich allerdings etwas umgesehen und bin auf dieses Upload-Formular gestoßen, dass Drag and Drop unterstützt und sogar den Fortschritt als Kreis anzeigt. (Mini AJAX File Upload Form | Tutorialzine)

Ich habe also das Upload-Formular genommen und als serverseitige Verarbeitung mein altes PHP-Skript verwendet. Jetzt funktioniert auch alles (Umbenennung, Verschiebung an Speicherort, etc.) aber es wird nicht mehr die Meldung ausgegeben (per echo""; siehe unten), die den Downloadlink anzeigt und sagt, dass alles hochgeladen wurde; sondern nur ein grünes Häkchen. Allerdings müssen die User unbedingt den Downloadlink angezeigt bekommen, sonst macht ja der ganze Upload keinen Sinn :(.

Auf den Punkt gebracht: Ich möchte das obige Formular verwenden und muss es irgendwie hinkriegen, dass die Ausgabe per echo wieder funktioniert. Idee?

Hier noch mein oben genanntes PHP-Skript zur Verarbeitung:
PHP:
<?php

if(isset($_FILES['datei']['name'])) // nur ausführen, wenn Datei ausgewählt
{

$max_filesize = 52428800; // maximale Dateigröße in Byte (hier: 50MB)
$max_filesize_mb = 50; // in normaler Einheit

if($_FILES['datei']['size'] < $max_filesize) // wenn Datei unter Größen-Limit und vorhanden
{

	$id = md5(uniqid()); // zufällige Zeichenfolge für unterschiedliche Dateinamen erzeugen

	// Name der hochgeladenen Datei in Kleinbuchstaben als Variable festlegen
	$DateiName = str_replace(' ','-',strtolower($_FILES['datei']['name'])); 

	// Dateierweiterung durch Suchen des letzten Punktes im Dateinamen erhalten
	$DateiExt = substr($DateiName, strrpos($DateiName, '.'));
  	$DateiExt = str_replace('.','',$DateiExt);
	
	// Dateierweiterung vorrübergehend löschen
	$DateiName 		= preg_replace("/\\.[^.\\s]{3,4}$/", "", $DateiName); 
	
	// Neuen Dateinamen aus Name + zufällige Zeichenfolge + Erweiterung
	$NewDateiName = $DateiName.'_'.$id.'.'.$DateiExt;


	$ziel='uploaded-files'."\\".$NewDateiName; // Zielverzeichnis festlegen und Umbenennung

		
	$temp_datei = $_FILES['datei']['tmp_name']; // nicht verändern!!!

	move_uploaded_file($temp_datei,$ziel); // Hochgeladene Datei aus temporären Speicher in Zielordner verschieben

	echo"<h4>'{$_FILES['datei']['name']}' wurde erfolgreich hochgeladen.<br>Downloadlink: <a href='https://eg-net.dnsget.org/upload/uploaded-files/$NewDateiName' title='$NewDateiName' target='_blank'>https://eg-net.dnsget.org/upload/uploaded-files/$NewDateiName</a></h4>";

// ###################################
// diese obige Meldung funktioniert nicht #########
// ###################################

}

else // wenn Datei größer als erlaubt, Fehler anzeigen
{	

	echo"<br><br><h3> FEHLER:   Die Datei ist zu groß. (max. ".$max_filesize_mb." MB)\n";
  	//include("error.html");
}
}

else // wenn keine Datei mitgesendet, Fehler anzeigen
{
	echo"<br><br><h3> FEHLER:   Es ist keine Datei ausgewählt.</h3>";
}

exit();
?>
 
Wie sieht denn dein JS Code zur Verarbeitung der Response im Ajax Upload aus?

Lad dir am besten mal die ZIP runter und schau dir die JS-Dateien drin an. Da sind eine Plugins für jQuery, die habe ich jetzt mal nicht beachtet und dann noch die skript.js, die sieht so aus: (kenn mich zwar mit JavaScript ganz gut aus, aber AJAX verwende ich ungern und bin auf dem Gebiet ziemlicher Neuling ;) )

Code:
$(function(){

    var ul = $('#upload ul');

    $('#drop a').click(function(){
        // Simulate a click on the file input button
        // to show the file browser dialog
        $(this).parent().find('input').click();
    });

    // Initialize the jQuery File Upload plugin
    $('#upload').fileupload({

        // This element will accept file drag/drop uploading
        dropZone: $('#drop'),

        // This function is called when a file is added to the queue;
        // either via the browse button, or via drag/drop:
        add: function (e, data) {

            var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"'+
                ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');

            // Append the file name and file size
            tpl.find('p').text(data.files[0].name)
                         .append('<i>' + formatFileSize(data.files[0].size) + '</i>');

            // Add the HTML to the UL element
            data.context = tpl.appendTo(ul);

            // Initialize the knob plugin
            tpl.find('input').knob();

            // Listen for clicks on the cancel icon
            tpl.find('span').click(function(){

                if(tpl.hasClass('working')){
                    jqXHR.abort();
                }

                tpl.fadeOut(function(){
                    tpl.remove();
                });

            });

            // Automatically upload the file once it is added to the queue
            var jqXHR = data.submit();
        },

        progress: function(e, data){

            // Calculate the completion percentage of the upload
            var progress = parseInt(data.loaded / data.total * 100, 10);

            // Update the hidden input field and trigger a change
            // so that the jQuery knob plugin knows to update the dial
            data.context.find('input').val(progress).change();

            if(progress == 100){
                data.context.removeClass('working');
            }
        },

        fail:function(e, data){
            // Something has gone wrong!
            data.context.addClass('error');
        }

    });


    // Prevent the default action when a file is dropped on the window
    $(document).on('drop dragover', function (e) {
        e.preventDefault();
    });

    // Helper function that formats the file sizes
    function formatFileSize(bytes) {
        if (typeof bytes !== 'number') {
            return '';
        }

        if (bytes >= 1000000000) {
            return (bytes / 1000000000).toFixed(2) + ' GB';
        }

        if (bytes >= 1000000) {
            return (bytes / 1000000).toFixed(2) + ' MB';
        }

        return (bytes / 1000).toFixed(2) + ' KB';
    }

});
 
Im Moment blicke ich nicht ganz durch.
Die Funktion fileupload() hat vier Parameter: dropZone, add, progress und fail.
Was mir dabei fehlt ist eine Art success Parameter. Also ein Parameter mit dem man sagen kann was passieren soll wenn der Upload vollendet ist. Und das ganze mit einer Variable die die Response des Serverscripts enthält.
Schaust du auch mal mit, ob du sowas findest. Ansonsten vielleicht mal den Autor des Plugins fragen?
Ansonsten müsste nämlich jemand komplett das Plugin zerpflücken und nachschauen, wo man das anflanschen kann.
Im Moment scheint das mit diesem Plugin schlicht nicht vorgesehen zu sein oder ich sehe es nicht.
 
Also, ich habe den Entwickler kontaktiert, Anfrage kann aber noch etwas dauern.

Und: Kann man nicht noch einen success-Parameter "hinzuprogrammieren"?
 
Kann man alles. Hab ich ja geschrieben. Dafür müsste man das Plugin zerpflücken und das integrieren.
 
OK, das halte ich mal als letzte Möglichkeit noch offen. Ich werde hier informieren, wenn sich der Entwickler meldet.
 
[UPDATE] PHP "echo" funktioniert nicht bei einem AJAX-Formular

Anscheinend wir meine Anfrage an den Entwickler ignoriert. Kennt irgendwer eine Alternative für das AJAX-Upload-Formular, also auch mit Drag and Drop und Progress-Anzeige?
 
Zurück
Oben