Heim >Web-Frontend >js-Tutorial >PHP jQuery Ajax implementiert mehrere Bild-Upload-Effekte_jquery

PHP jQuery Ajax implementiert mehrere Bild-Upload-Effekte_jquery

WBOY
WBOYOriginal
2016-05-16 16:09:301459Durchsuche

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:



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 'PHP jQuery Ajax implementiert mehrere Bild-Upload-Effekte_jquery'; }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.
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn