PHP+ajaxForm異步帶進度條上傳檔案執行個體

在使用ajaxForm方法之前，首先需要安裝form.js的插件,網上有；

一、首先說用法，ajaxForm可以接收0或1個參數，該參數可以是一個變量、一個對象或回調函數，這個對象主要有以下參數：

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 的 <div>。
接着，在上面的 <div> 内，添加一個帶有 class .progress-bar 的空的 <div>。
添加一個帶有百分比表示的寬度的 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>
<div class="uk-container uk-container-center">
    <div class="pk-system-messages"></div>
    <h1 class="uk-h2 uk-text-center" style="margin-top:-100px;">檔案上傳</h1>
    <div class="pk-system-messages"></div>
    <div class="container-main">
        <h1>檔案上傳</h1>
        <p>這裡隻是一個ajax+php+ajaxForm上傳檔案word文檔例子</p>
        <form id='myupload' action='upload.php' method='post' enctype='multipart/form-data'>
            <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='text' name="list" value="555"/>
        </form>
        <div class="progress">
            <div 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>
           </div>
        </div>
       <div class="files"></div>
       <div class="showimg"></div>
     </div>
          
</div>
</body>
<script type="text/javascript">
$(function () {
   $("#myupload").ajaxForm({
     dataType:'json',
     beforeSend:function(){ 
         $(".progress").show();
     },
     uploadProgress:function(event,position,total,percentComplete){
         var percentVal = percentComplete + '%';
         $(".progress-bar").width(percentComplete + '%');
         $(".progress-bar").html(percentVal);
         $(".sr-only").html(percentComplete + '%');
     },
     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='delimg' rel='"+data.pic+"'>删除</span>");
         $(".files").html("檔案名: "+data.name+"<span class='delimg' rel='"+data.pic+"'>  del  </span>大小："+data.size);
         var img = "files/"+data.pic;
         $(".showimg").html("<img src='"+img+"'>");
         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('error'=>'empty_name','type'=>$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('error'=>'format','type'=>$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('error'=>'large');
          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('YmdHis') . $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

<?php
include("upload.class.php");
$up_obj = new upload();
//擷取上傳檔案名
$get_fileName = $_FILES['mypic']['name']; 
$get_fileSize = $_FILES['mypic']['size'];
$get_TmpFiles = $_FILES['mypic']['tmp_name'];
$get_fileType = strstr($get_fileName, '.');
$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(
            'name' => $get_fileName,
             'pic' => $pics,
             'size'=> $size,
             'error' => 2,
             'list'  =>$_POST['list']
         );
       if($pics){ //檢查檔案上傳狀态
         echo json_encode($arr);
      }   
    }
  }
  
}
?>

執行個體檔案百度網盤下載下傳位址：http://pan.baidu.com/s/1cdFXmu

密碼：d1fr

PHP+ajaxForm異步帶進度條上傳檔案執行個體

繼續閱讀

第三章 Joomla!擴充開發--後端開發（續2）

Centos 7 Apache配置虛拟主機

PHP進階學習之session寫入資料庫

php寫一個簡潔的登入頁面

Apache與PHP環境下配置本地虛拟主機

Testlink安裝部署之XAMPP

TestLink 圖表中文亂碼問題

ecshop屬性排序

Ubuntu16.04安裝Apache+MySQL+PHP1. 安裝Apache2. 安裝MySQL3. 安裝PHP4. 安裝phpMyAdmin

版本号隐藏

Apache配置SSLApache配置SSL

配置apache支援PHP（win7）

Cloud Studio初體驗

NOSQL安全攻擊

php 去掉字元串的最後一個字元及截取原字元串1,2,3,4,5,6,

php——水印