PHP + Ajax で更新なし、プログレスバー画像のアップロード例-PHPチュートリアル-php.cn

PHP + Ajax で更新なし、プログレスバー画像のアップロード例

高洛峰

リリース： 2023-03-05 16:58:02

オリジナル

1708 人が閲覧しました

この記事では、主にプログレスバー付きのPHP + Ajax非リフレッシュ画像アップロードの例を紹介し、プログレスバー付きのPHP非リフレッシュ画像アップロードのコードを詳しく整理します。必要に応じて学習できます。

プロジェクト要件: 1. PHP + Ajax 画像を更新せずにアップロードし、進行状況バーを表示します。 2. 進行状況バーを表示します。必要なプラグイン: jquery.js、jquery.form.js。

最近、Ajax アップロード機能を使用するモバイル Web プロジェクトに取り組んでいます。このプロジェクトでは、PHP で画像を更新せずにプログレスバーを使用してアップロードする必要があります。その実装方法について説明します。最初にレンダリングします

PHP + Ajax で更新なし、プログレスバー画像のアップロード例

この例では、デモに含まれている jquery.js と jquery.form.js を使用する必要があります。これらは記事の下部でダウンロードできます。

最初のステップは、フロントエンドページのindex.htmlを作成することです

このセクションはフロントエンドの表示コンテンツです。ここで説明する必要があるのは、input:fileタグはあまり美しくないため、非表示にします。。そして、タグ .uploadbtn を使用してファイルタグのクリックイベントを呼び出し、ファイルを開いて選択します。

注: ファイルをアップロードするときは、フォーム属性 enctype を multipart/form-data に設定する必要があります:プロセスは次のとおりです。

送信開始時に beforeSend コールバック関数を通じて表示されるようにプログレスバーを設定します。

アップロードプロセスでは、uploadProgress コールバック関数を通じてリアルタイムで返されるデータにより、進行状況バーの幅と進行状況の値が変更されます。

nbsp;HTML>


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


<p>
 </p>

ログイン後にコピー

50%

点击上传文件

3番目のステップはバックエンドPHPコードupload.php

注: 上記の ajax 戻り形式は json であるため、画像内の json コードは正しく標準化されている必要があります。そうしないと、アップロードが失敗したことを示すプロンプトが表示されます。

<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 で更新なし、プログレスバー画像のアップロード例" >&#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>

ログイン後にコピー

デモのダウンロード: php-ajax-upload_jb51.rar

以上がこの記事の全内容です。皆様の PHP の学習に役立つことを願っています。中国語のウェブサイト。

進行状況バー画像を使用した PHP + Ajax の非更新サンプルと関連記事の詳細については、PHP 中国語 Web サイトに注目してください。