PHP+Ajax keine Aktualisierung mit Fortschrittsbalken-Bild-Upload-Beispiel

In diesem Artikel wird hauptsächlich das Beispiel für das Hochladen von PHP+Ajax-Bildern ohne Aktualisierung und mit Fortschrittsbalken vorgestellt und der Code für das Hochladen von PHP-Bildern ohne Aktualisierung und mit Fortschrittsbalken im Detail beschrieben. Bei Bedarf können Sie mehr darüber erfahren.

Projektanforderungen: 1. PHP+Ajax-Bild-Upload mit Fortschrittsbalken ohne Aktualisierung, 2. Mit Fortschrittsbalken. Erforderliche Plugins: jquery.js, jquery.form.js.

Ich arbeite derzeit an einem mobilen Webprojekt, das die Ajax-Upload-Funktion erfordert. Das Projekt erfordert PHP, um Bilder ohne Aktualisierung und mit einem Fortschrittsbalken hochzuladen . Abbildung

In diesem Beispiel müssen jquery.js und jquery.form.js verwendet werden, die in der Demo enthalten sind der Artikel.

Der erste Schritt besteht darin, die Front-End-Seite index.html zu erstellen

Dieser Abschnitt ist der Front-End-Anzeigeinhalt. Hier muss erklärt werden, dass es sich um das Tag „input:file“ handelt nicht sehr schön, also verstecke ich es. Und verwenden Sie ein a-Tag .uploadbtn, um das Klickereignis des Datei-Tags aufzurufen, um die Datei zu öffnen und auszuwählen.

Hinweis: Beim Hochladen von Dateien muss das Formularattribut enctype auf „multipart/form-data“ gesetzt werden

nbsp;HTML>


<meta>
<title>php-ajax无刷新上传(带进度条)demo</title>
<meta>
<meta>
<script></script>
<script></script>
<link>


<p>
 </p>

   

 

 

 

 

 

50%

   点击上传文件

Der zweite Schritt, Ajax-Übermittlungsteil

Dieser Teil ist der Übermittlungsteil von Ajax, der Prozess ist wie folgt:

• Stellen Sie die Fortschrittsbalkenanzeige über ein Die BeforeSend-Rückruffunktion wird zu Beginn der Übermittlung ausgegeben, die Breite des Fortschrittsbalkens beträgt 0 % und der Fortschrittswert beträgt 0 %. Während des Upload-Vorgangs werden die Daten zurückgegeben Die Rückruffunktion uploadProgress ändert in Echtzeit die Breite und den Fortschrittswert des Fortschrittsbalkens.

• Nachdem der Upload erfolgreich war, werden die hochgeladenen Dateninformationen (Bildname, Größe, Adresse usw.) über die Erfolgsrückruffunktion ausgegeben und das Bild zur Vorschau auf der Seite ausgegeben .

• Wenn dies fehlschlägt, gibt es natürlich eine Fehlerrückruffunktion, die Ihnen beim Anpassen der Höhe hilft.

<script>
$(document).ready(function(e) {
 var progress = $(".progress"); 
 var progress_bar = $(".progress-bar");
 var percent = $(&#39;.percent&#39;);
 $("#uploadphoto").change(function(){
 $("#myupload").ajaxSubmit({ 
 dataType: &#39;json&#39;, //数据格式为json 
 beforeSend: function() { //开始上传 
 progress.show();
 var percentVal = &#39;0%&#39;;
 progress_bar.width(percentVal);
 percent.html(percentVal);
 }, 
 uploadProgress: function(event, position, total, percentComplete) { 
 var percentVal = percentComplete + &#39;%&#39;; //获得进度 
 progress_bar.width(percentVal); //上传进度条宽度变宽 
 percent.html(percentVal); //显示上传进度百分比 
 }, 
 success: function(data) {
 
 if(data.status == 1){
 var src = data.url; 
 var attstr= &#39;<img  src="&#39;+src+&#39;" alt="PHP+Ajax keine Aktualisierung mit Fortschrittsbalken-Bild-Upload-Beispiel" >&#39;; 
 $(".imglist").append(attstr);
 $(".res").html("上传图片"+data.name+"成功，图片大小："+data.size+"K,文件地址："+data.url);
 }else{
 $(".res").html(data.content);
 }
 progress.hide(); 
 }, 
 error:function(xhr){ //上传失败 
 alert("上传失败"); 
 progress.hide(); 
 } 
 }); 
 });
 
});
</script>

Der dritte Schritt, Backend-PHP-Code upload.php

Der Back-End-Verarbeitungscode ist das Hochladen von PHP-Dateien. Beim Hochladen müssen jedoch einige Beurteilungen vorgenommen werden, z. B. Dateiformat, Dateigröße usw.

Hinweis: Das obige Ajax-Rückgabeformat ist JSON, daher muss der JSON-Code für das Bild korrekt standardisiert sein, andernfalls wird eine Meldung angezeigt, dass der Upload fehlgeschlagen ist.

$picname = $_FILES['uploadfile']['name']; 
 $picsize = $_FILES['uploadfile']['size']; 
 if ($picname != "") { 
 if ($picsize > 2014000) { //限制上传大小 
 echo '{"status":0,"content":"图片大小不能超过2M"}';
 exit; 
 } 
 $type = strstr($picname, '.'); //限制上传格式 
 if ($type != ".gif" && $type != ".jpg" && $type != "png") {
 echo '{"status":2,"content":"图片格式不对！"}';
 exit; 
 }
 $rand = rand(100, 999); 
 $pics = uniqid() . $type; //命名图片名称 
 //上传路径 
 $pic_path = "images/". $pics; 
 move_uploaded_file($_FILES['uploadfile']['tmp_name'], $pic_path); 
 } 
 $size = round($picsize/1024,2); //转换成kb 
 echo '{"status":1,"name":"'.$picname.'","url":"'.$pic_path.'","size":"'.$size.'","content":"上传成功"}';

Demo-Download: php-ajax-upload_jb51.rar

Das Obige ist das Zusammenfassung dieses Artikels Alle Inhalte, ich hoffe, dass sie für das Lernen aller hilfreich sind, und ich hoffe auch, dass alle die chinesische PHP-Website unterstützen.

Weitere Beispiele zum Hochladen von PHP+Ajax-Bildern ohne Aktualisierung mit Fortschrittsbalken und verwandte Artikel finden Sie auf der chinesischen PHP-Website!