Heim > Artikel > Backend-Entwicklung > PHP+Ajax implementiert einen aktualisierungsfreien Bild-Upload mit Fortschrittsbalken

PHP+Ajax implementiert einen aktualisierungsfreien Bild-Upload mit Fortschrittsbalken

墨辰丷Original: 2018-05-25 16:29:251482Durchsuche

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 organisiert. Wenn Sie ihn benötigen, 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 Absatz ist der Inhalt der Front-End-Anzeige Hier muss erklärt werden, dass die Eingabe: file Das Etikett sieht nicht sehr schön aus, also verstecke ich es. Ein Tag .uploadbtn wird verwendet, 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 gesetzt werden: multipart/form-data

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>php-ajax无刷新上传(带进度条)demo</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width , initial-scale=1.0 , user-scalable=0 , minimum-scale=1.0 , maximum-scale=1.0" />
<script type=&#39;text/javascript&#39; src=&#39;js/jquery-2.0.3.min.js&#39;></script>
<script type=&#39;text/javascript&#39; src=&#39;js/jquery.form.js&#39;></script>
<link href="css/style.css" rel="external nofollow" type="text/css" rel="stylesheet"/>
</head>
<body>
<p style="width:500px;margin:10px auto; border:solid 1px #ddd; overflow:hidden; ">
 <form id=&#39;myupload&#39; action=&#39;upload.php&#39; method=&#39;post&#39; enctype=&#39;multipart/form-data&#39;>
 <input type="file" id="uploadphoto" name="uploadfile" value="请点击上传图片" style="display:none;" />
 </form>
 <p class="imglist"> </p>
 <p class="res"></p>
 <p class="progress">
 <p class="progress-bar progress-bar-striped"><span class="percent">50%</span></p>
 </p>
 <a href="javascript:void(0);" rel="external nofollow" onclick="uploadphoto.click()" class="uploadbtn">点击上传文件</a>
</p>
</body>
</html>

Kapitel Zweiter Schritt, Ajax-Einreichungsteil

Dieser Teil ist der Einreichungsteil von Ajax. Der Prozess ist wie folgt:

Am Anfang Übergeben Sie nach der Übermittlung die Rückruffunktion beforeSend. Stellen Sie den anzuzeigenden Fortschrittsbalken ein. Die Breite des Fortschrittsbalkens beträgt 0 % und der Fortschrittswert beträgt 0 %.
Während des Upload-Vorgangs Verwenden Sie die in Echtzeit von der Rückruffunktion uploadProgress zurückgegebenen Daten, um die Breite und den Fortschritt des Fortschrittsbalkenwerts zu ändern.
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 type="text/javascript">
$(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;">&#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[&#39;uploadfile&#39;][&#39;name&#39;]; 
 $picsize = $_FILES[&#39;uploadfile&#39;][&#39;size&#39;]; 
 if ($picname != "") { 
 if ($picsize > 2014000) { //限制上传大小 
 echo &#39;{"status":0,"content":"图片大小不能超过2M"}&#39;;
 exit; 
 } 
 $type = strstr($picname, &#39;.&#39;); //限制上传格式 
 if ($type != ".gif" && $type != ".jpg" && $type != "png") {
 echo &#39;{"status":2,"content":"图片格式不对！"}&#39;;
 exit; 
 }
 $rand = rand(100, 999); 
 $pics = uniqid() . $type; //命名图片名称 
 //上传路径 
 $pic_path = "images/". $pics; 
 move_uploaded_file($_FILES[&#39;uploadfile&#39;][&#39;tmp_name&#39;], $pic_path); 
 } 
 $size = round($picsize/1024,2); //转换成kb 
 echo &#39;{"status":1,"name":"&#39;.$picname.&#39;","url":"&#39;.$pic_path.&#39;","size":"&#39;.$size.&#39;","content":"上传成功"}&#39;;

Demo-Download: php-ajax-upload_jb51.rar

Das Obige ist hoffentlich der gesamte Inhalt dieses Artikels Es wird für alle beim Lernen hilfreich sein.

Verwandte Empfehlungen:

PHP-Remote-Download BilderDetaillierte Erklärung zum Speichern am lokalen Standort

So implementieren Sie die PHP-CodeverarbeitungBilder

Vux-Uploader BilderKomponente hochladen Nutzungsanleitung

Das obige ist der detaillierte Inhalt vonPHP+Ajax implementiert einen aktualisierungsfreien Bild-Upload mit Fortschrittsbalken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Vorheriger Artikel：So erhalten Sie Geschlecht und Geburtsdatum vom Personalausweis in PHPNächster Artikel：So erhalten Sie Geschlecht und Geburtsdatum vom Personalausweis in PHP

In Verbindung stehende Artikel

Mehr sehen