PHP jQuery Ajax implementiert mehrere Bild-Upload-Effekte_jquery

Was ich heute mit Ihnen teilen werde, ist die Verwendung von PHP jQuery Ajax, um den Effekt zu erzielen, mehrere Bilder hochzuladen, ohne die Seite zu aktualisieren. Der Benutzer muss nur klicken, um das hochzuladende Bild auszuwählen. Anschließend wird das Bild automatisch auf den Server hochgeladen und auf der Seite angezeigt.

HTML

Wir platzieren ein Formular auf der Seite und senden es per Post an den Hintergrund-PHP-Handler upload.php. Beachten Sie, dass die enctype-Attributeinstellung das Hochladen von Dateien unterstützen muss. #preview wird verwendet, um das Bild nach dem Hochladen anzuzeigen. In diesem Artikel gibt es keine Erklärung zur CSS-Stileinstellung. Bitte beachten Sie den Quellcode des Download-Pakets.

Code kopieren Der Code lautet wie folgt:

                                                                                                                                                                                                                Bild hinzufügen           

Maximal 100 KB, unterstützt die Formate JPG, GIF und PNG.

jQuery
Dieses Beispiel basiert auf jQuery, daher müssen die jquery-Bibliothek und jquery.wallform.js in die Seite geladen werden.

Code kopieren

Der Code lautet wie folgt:

Wenn Sie auf die Schaltfläche „Bild hinzufügen“ klicken, wird ein Dateiauswahldialogfeld angezeigt. Nach Auswahl des hochzuladenden Bildes wird das Änderungsereignis ausgelöst. Anschließend ruft das Formular #imageform die ajaxForm()-Methode von jquery.wallform.js auf, übermittelt die Formulardaten zur Verarbeitung an das Hintergrund-PHP und verarbeitet die Anzeige von Seitenelementen basierend auf den zurückgegebenen Ergebnissen. Wenn der Upload erfolgreich ist, werden die Bilder einzeln auf der Seite angezeigt. Informationen zur Verwendung von ajaxForm() finden Sie im Artikel auf dieser Website: Ajax-Formularübermittlungs-Plug-in jqery-Formular.

Code kopieren

Der Code lautet wie folgt:

$(function(){

$('#photoimg').die('click').live('change', function(){         var status = $("#up_status");       var btn = $("#up_btn");           $("#imageform").ajaxForm({ Ziel: '#preview',               beforeSubmit:function(){ status.show();                    btn.hide();              },                 success:function(){

status.hide();

                     btn.show();              },
            error:function(){
status.hide();
                     btn.show();            } }).submit();
});
});

PHP

upload.php verarbeitet Bild-Uploads und speichert hochgeladene Bilder im Verzeichnis uploads/. Beachten Sie, dass das Verzeichnis über Schreibrechte verfügen muss. Zuerst müssen Sie prüfen, ob es im POST-Modus übermittelt wird, dann feststellen, ob das Bildformat und die Bildgröße den Anforderungen entsprechen, dann das Bild mit move_uploaded_file() hochladen und das Bild in folgendes Format umbenennen: time().rand (100.999).

Code kopieren Der Code lautet wie folgt:

$path = "uploads/"
$extArr = array("jpg", "png", "gif");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
$name = $_FILES['photoimg']['name']; $size = $_FILES['photoimg']['size']; If(empty($name)){
echo 'Bitte wählen Sie das hochzuladende Bild aus'; beenden;
}
$ext = erweitern($name);
If(!in_array($ext,$extArr)){
echo 'Das Bildformat ist falsch! ';
beenden;
}
If($size>(100*1024)){
echo 'Die Bildgröße darf 100 KB nicht überschreiten'; beenden;
}
$image_name = time().rand(100,999).".".$ext; $tmp = $_FILES['photoimg']['tmp_name']; If(move_uploaded_file($tmp, $path.$image_name)){
echo ''; }else{
echo 'Upload-Fehler! ';
}
beenden;
}
//Dateitypsuffix
abrufen Funktion extension($file_name){
$extend = pathinfo($file_name); $extend = strtolower($extend["extension"]);
Geben Sie $extend;
zurück }



Natürlich kann es in tatsächlichen Anwendungen mit der Datenbank und dem Benutzercenter kombiniert werden, um die von Benutzern hochgeladenen Bilder in der Datentabelle zu speichern. Sie können die spezifischen Anwendungen selbst studieren.

Das Obige ist der gesamte Inhalt, der in diesem Artikel mit Ihnen geteilt wird. Ich hoffe, dass er Ihnen gefällt.