PHP和AjaxForm實作非同步帶進度條上傳文件-php教程-PHP中文網

首頁

後端開發

php教程

PHP和AjaxForm實作非同步帶進度條上傳文件

小云云

Jan 26, 2018 pm 01:54 PM

php 上傳

本文重點介紹PHP+AjaxForm非同步帶進度條上傳檔案實例程式碼，在使用ajaxForm方法之前，首先需要安裝form.js的插件,網路上可以找到，有興趣的朋友一起看看吧，希望能幫助大家。

在使用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 的 <p>。
接着，在上面的 <p> 内，添加一个带有 class .progress-bar 的空的 <p>。
添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置
-->
<link rel="stylesheet" href="public/css/bootstrap.min.css" rel="external nofollow" > 
<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 class="uk-h2 uk-text-center" style="margin-top:-100px;">文件上传</h1>
  <p class="pk-system-messages"></p>
  <p class="container-main">
    <h1>文件上传</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;>");
     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

############################################################################# #######

<?php
include("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實例######

以上是PHP和AjaxForm實作非同步帶進度條上傳文件的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7848

Java教學

1649

CakePHP 教程

1403

Laravel 教程

1300

PHP教程

1241

Related knowledge

適用於 Ubuntu 和 Debian 的 PHP 8.4 安裝和升級指南 Dec 24, 2024 pm 04:42 PM

PHP 8.4 帶來了多項新功能、安全性改進和效能改進，同時棄用和刪除了大量功能。本指南介紹如何在 Ubuntu、Debian 或其衍生版本上安裝 PHP 8.4 或升級到 PHP 8.4

如何設定 Visual Studio Code (VS Code) 進行 PHP 開發 Dec 20, 2024 am 11:31 AM

Visual Studio Code，也稱為 VS Code，是一個免費的原始碼編輯器 - 或整合開發環境 (IDE) - 可用於所有主要作業系統。 VS Code 擁有大量針對多種程式語言的擴展，可以輕鬆編寫

在PHP API中說明JSON Web令牌（JWT）及其用例。 Apr 05, 2025 am 12:04 AM

JWT是一種基於JSON的開放標準，用於在各方之間安全地傳輸信息，主要用於身份驗證和信息交換。 1.JWT由Header、Payload和Signature三部分組成。 2.JWT的工作原理包括生成JWT、驗證JWT和解析Payload三個步驟。 3.在PHP中使用JWT進行身份驗證時，可以生成和驗證JWT，並在高級用法中包含用戶角色和權限信息。 4.常見錯誤包括簽名驗證失敗、令牌過期和Payload過大，調試技巧包括使用調試工具和日誌記錄。 5.性能優化和最佳實踐包括使用合適的簽名算法、合理設置有效期、

php程序在字符串中計數元音 Feb 07, 2025 pm 12:12 PM

字符串是由字符組成的序列，包括字母、數字和符號。本教程將學習如何使用不同的方法在PHP中計算給定字符串中元音的數量。英語中的元音是a、e、i、o、u，它們可以是大寫或小寫。什麼是元音？元音是代表特定語音的字母字符。英語中共有五個元音，包括大寫和小寫： a, e, i, o, u 示例 1 輸入：字符串 = "Tutorialspoint" 輸出：6 解釋字符串 "Tutorialspoint" 中的元音是 u、o、i、a、o、i。總共有 6 個元

您如何在PHP中解析和處理HTML/XML？ Feb 07, 2025 am 11:57 AM

本教程演示瞭如何使用PHP有效地處理XML文檔。 XML（可擴展的標記語言）是一種用於人類可讀性和機器解析的多功能文本標記語言。它通常用於數據存儲

解釋PHP中的晚期靜態綁定（靜態：:)。 Apr 03, 2025 am 12:04 AM

靜態綁定（static::）在PHP中實現晚期靜態綁定（LSB），允許在靜態上下文中引用調用類而非定義類。 1）解析過程在運行時進行，2）在繼承關係中向上查找調用類，3）可能帶來性能開銷。

什麼是PHP魔術方法（__ -construct，__destruct，__call，__get，__ set等）並提供用例？ Apr 03, 2025 am 12:03 AM

PHP的魔法方法有哪些？ PHP的魔法方法包括：1.\_\_construct，用於初始化對象；2.\_\_destruct，用於清理資源；3.\_\_call，處理不存在的方法調用；4.\_\_get，實現動態屬性訪問；5.\_\_set，實現動態屬性設置。這些方法在特定情況下自動調用，提升代碼的靈活性和效率。