php と ajaxForm がプログレスバー付きの非同期ファイルアップロードを実装する方法の例-PHPチュートリアル-php.cn

ホームページ

バックエンド開発

PHPチュートリアル

php と ajaxForm がプログレスバー付きの非同期ファイルアップロードを実装する方法の例

黄舟

Aug 13, 2017 am 09:10 AM

phpスケジュール

ajaxForm メソッドを使用する前に、まずオンラインで入手可能な form.js プラグインをインストールする必要があります。

まず、AjaxForm が変数またはオブジェクトを受け取ることができる使用法について説明します。このオブジェクトには主に次のパラメータがあります:

var object= {
                     url:url,　　　　　　//form提交数据的地址
　　　　　　  type:type,　　　  //form提交的方式(method:post/get)
　　　　　　  target:target,　　//服务器返回的响应数据显示的元素(Id)号
                      beforeSerialize:function(){} //序列化提交数据之前的回调函数
　　　　　　  beforeSubmit:function(){},　　//提交前执行的回调函数
　　　　　　  success:function(){},　　　　   //提交成功后执行的回调函数
                      error:function(){},             //提交失败执行的函数
　　　　　　  dataType:null,　　　　　　　//服务器返回数据类型
　　　　　　  clearForm:true,　　　　　　 //提交成功后是否清空表单中的字段值
　　　　　　  restForm:true,　　　　　　  //提交成功后是否重置表单中的字段值，即恢复到页面加载时的状态
　　　　　　  timeout:6000 　　　　　 　 //设置请求时间，超过该时间后，自动退出请求，单位(毫秒)。　　
}

ajaxForm js的code

$(function(){
   $("form").ajaxForm(object)；
})

インスタンス固有のコードcode

htmlcode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="X-UA-Compatible" content="IE=7" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="ROBOTS" content="NOODP"><title>PHP+Ajax异步带进度条上传文件实例_php</title><meta http-equiv="X-UA-Compatible" content="IE=EDGE" /><meta name="keywords" content="php,ajax异步上传文件,ajax,异步加载,进度条,php,ajax上传进度条" /><meta name="description" content="这篇文章主要介绍了PHP+Ajax异步带进度条上传文件实例代码。" /><!--默认的进度条样式文件
添加一个带有 class .progress 的 <p>。
接着，在上面的 <p> 内，添加一个带有 class .progress-bar 的空的 <p>。
添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置--><link rel="stylesheet" href="public/css/bootstrap.min.css"> <script src="public/js/jquery.min.js"></script><script src="public/js/jquery.form.js"></script> <!--ajaxForm 提交form表单数据无刷新处理数据--></head><body><p class="uk-container uk-container-center">
    <p class="pk-system-messages"></p>
    <h1 id="文件上传">文件上传</h1>
    <p class="pk-system-messages"></p>
    <p class="container-main">
        <h1 id="文件上传">文件上传</h1>
        <p>这里只是一个ajax+php+ajaxForm上传文件word文档例子</p>
        <form id=&#39;myupload&#39; action=&#39;upload.php&#39; method=&#39;post&#39; enctype=&#39;multipart/form-data&#39;>
            <label for="file">选择上传文件名:</label>
            <input type="file" name="mypic" id="file"><br>
            <input type="submit" name="upload" class="btn btn-success" value="upload">
            <input type=&#39;text&#39; name="list" value="555"/>
        </form>
        <p class="progress">
            <p class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%;color:red;">
                   <span class="sr-only">10% Complete</span>
           </p>
        </p>
       <p class="files"></p>
       <p class="showimg"></p>     </p>          </p></body><script type="text/javascript">$(function () {
   $("#myupload").ajaxForm({
     dataType:&#39;json&#39;,
     beforeSend:function(){ 
         $(".progress").show();
     },
     uploadProgress:function(event,position,total,percentComplete){
         var percentVal = percentComplete + &#39;%&#39;;
         $(".progress-bar").width(percentComplete + &#39;%&#39;);
         $(".progress-bar").html(percentVal);
         $(".sr-only").html(percentComplete + &#39;%&#39;);
     },
     success:function(data){
         $(".progress").hide();
       
         if(data.error == "empty_name"){
             alert("文件上传非法,上传失败!");
             exit();
         };
         if(data.error == "large"){
             alert("图片上传不能大于2M,上传失败!");
             exit();
         };
   
         if(data.error == "format"){
             alert("图片格式错误,上传失败");
             exit();
         };
   
         //$(".files").html("<b>"+data.name+"("+data.size+"k)</b> <span class=&#39;delimg&#39; rel=&#39;"+data.pic+"&#39;>删除</span>");         $(".files").html("文件名: "+data.name+"<span class=&#39;delimg&#39; rel=&#39;"+data.pic+"&#39;>  del  </span>大小："+data.size);
         var img = "files/"+data.pic;
         $(".showimg").html("<img  src=&#39;"+img+"&#39; alt="php と ajaxForm がプログレスバー付きの非同期ファイルアップロードを実装する方法の例" >");
         alert("上传成功!");
     },
     error:function(){
         alert("上传失败");
     }
       
   });
   $(".progress").hide();
});</script></html>

phpアップロードアップロードクラスupload.class.phpファイル

<?php
date_default_timezone_set("PRC"); //设置时间区域
//上传类class upload{  protected $file_path = "files"; //当前files存储文件夹
  protected $file_size = 5120000; //5M 用户上传
 /**
  *检测文件是否为空  */
 public function check_file($get_file)
 {    if (empty($get_file))
    {        $type = "check_file";        $arr = array(&#39;error&#39;=>&#39;empty_name&#39;,&#39;type&#39;=>$type);        echo json_encode($arr);        exit();
    }  return true;
 } /**
  *检测文件类型  */
 public function check_type($get_type)
 {   if (( $get_type == ".docx" ) || ( $get_type == ".doc" )) {      //这里只是判断上传word文档可以自己添加
   }else{      $type = "check_type";      $arr = array(&#39;error&#39;=>&#39;format&#39;,&#39;type&#39;=>$type);        echo json_encode($arr);        exit(); 
  
   }  return true;
 } /**
  *检测文件大小  */
 public function check_size($get_file)
 {   if ( $get_file != "" ) {      if ( $get_file > $this->file_size ) {          $arr = array(&#39;error&#39;=>&#39;large&#39;);          echo json_encode($arr);          exit();
      }
  }else{    return false;    exit();
  } return true;
 } /**
  *文件保存  */
 public function save_file($file_type,$file_tmp_name)
 {  $rand = rand(1000, 9999);  $pics =date(&#39;YmdHis&#39;) . $rand . $file_type;  $path = $this->file_path."/".$pics;  $result = move_uploaded_file($file_tmp_name, $path);  if($result){    return $pics;
  }else{    return false;    exit();
  }
 }
}?>

ajax送信php処理ファイルupload.php

<?phpinclude("upload.class.php");$up_obj = new upload();//获取上传文件名$get_fileName = $_FILES[&#39;mypic&#39;][&#39;name&#39;]; 
$get_fileSize = $_FILES[&#39;mypic&#39;][&#39;size&#39;];$get_TmpFiles = $_FILES[&#39;mypic&#39;][&#39;tmp_name&#39;];$get_fileType = strstr($get_fileName, &#39;.&#39;);$check_result = $up_obj->check_file($get_fileName);if($check_result){  $result_type = $up_obj->check_type($get_fileType);//检查文件类型
  if($result_type){    $result_size = $up_obj->check_size($get_fileSize);//检查文件大小
    if($result_size){      $pics = $up_obj->save_file($get_fileType,$get_TmpFiles); //文件上传保存     
      $size = round($get_fileSize/1024,2);          $arr = array(            &#39;name&#39; => $get_fileName,
             &#39;pic&#39; => $pics,
             &#39;size&#39;=> $size,
             &#39;error&#39; => 2,
             &#39;list&#39;  =>$_POST[&#39;list&#39;]
         );       if($pics){ //检查文件上传状态
         echo json_encode($arr);
      }   
    }
  }
  
}?>

以上がphp と ajaxForm がプログレスバー付きの非同期ファイルアップロードを実装する方法の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

PHPメール：ステップバイステップ送信ガイドMay 09, 2025 am 12:14 AM

PhpisusedForsedingEmailsDueToitsIttegration withServerMailServicesAndExternalSmtpproviders、自動化とMarketingCampaign.1）SetupYourphpenvironment withebeBironment witheBiserverandphp、保証

PHP経由で電子メールを送信する方法：例とコードMay 09, 2025 am 12:13 AM

メールを送信する最良の方法は、PHPMailerライブラリを使用することです。 1）Mail（）関数を使用することはシンプルですが信頼できないため、電子メールがスパムを入力するか、配信できない場合があります。 2）PHPMailerは、より良い制御と信頼性を提供し、HTMLメール、添付ファイル、SMTP認証をサポートします。 3）SMTP設定が正しく構成されていることを確認し、暗号化（StartTLSやSSL/TLSなど）を使用してセキュリティを強化します。 4）大量の電子メールについては、メールキューシステムを使用してパフォーマンスを最適化することを検討してください。

高度なPHPメール：カスタムヘッダーと機能May 09, 2025 am 12:13 AM

customedersandaddadvancedfeaturesinphpemailentalitylivainability.1）customederadddetadata fortrackingandcategorization.2）htmLemailsallowStingtintintintintintinteractivity.3）添付物質の添付物質の添付

php＆smtpでメールを送信するためのガイドMay 09, 2025 am 12:06 AM

PHPとSMTPを使用してメールを送信することは、PHPMailerライブラリを介して実現できます。 1）PHPMailerをインストールして構成する、2）SMTPサーバーの詳細を設定する、3）電子メールコンテンツを定義し、4）メールを送信してエラーを処理します。この方法を使用して、電子メールの信頼性とセキュリティを確保します。

PHPを使用して電子メールを送信する最良の方法は何ですか？May 08, 2025 am 12:21 AM

BestappRoachforseminginphpisusingthephpmailerlibrarydueToitsReliability、featurrichness、andeaseofuse.phpmailerSupportssmtpは、detairederorhandlingを提供します

PHPでの依存関係注射のベストプラクティスMay 08, 2025 am 12:21 AM

依存関係注射（DI）を使用する理由は、コードのゆるい結合、テスト可能性、および保守性を促進するためです。 1）コンストラクターを使用して依存関係を注入します。2）サービスロケーターの使用を避け、3）依存関係噴射コンテナを使用して依存関係を管理する、4）依存関係を注入することでテスト可能性を向上させる、5）注入依存性を回避、6）パフォーマンスに対するDIの影響を考慮します。

PHPパフォーマンスのチューニングのヒントとコツMay 08, 2025 am 12:20 AM

phpperformancetuningisucial cuseenhancess andandandadsand。

PHP電子メールセキュリティ：電子メールを送信するためのベストプラクティスMay 08, 2025 am 12:16 AM

bestpracticesforsendingemails securlyinphpinclude：1）sutureconsmttarttlsencryptionとの使用の使用、2）検証およびサンシジン化のinputStopReventinjectuctacks、3）adinitivedinitivedInemailsopenslsl、4）adlinglinglingemailoaに

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

SublimeText3 中国語版

中国語版、とても使いやすい

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。