搜索
首页后端开发php教程php和ajaxForm如何实现异步带进度条上传文件的实例

php和ajaxForm如何实现异步带进度条上传文件的实例

黄舟
黄舟
Aug 13, 2017 am 09:10 AM
php进度

在使用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"> <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


<?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中文网其他相关文章！

声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
相关文章
使用PHP发送电子邮件的最佳方法是什么？使用PHP发送电子邮件的最佳方法是什么？May 08, 2025 am 12:21 AM

ThebestapproachforsendingemailsinPHPisusingthePHPMailerlibraryduetoitsreliability,featurerichness,andeaseofuse.PHPMailersupportsSMTP,providesdetailederrorhandling,allowssendingHTMLandplaintextemails,supportsattachments,andenhancessecurity.Foroptimalu

PHP中依赖注入的最佳实践PHP中依赖注入的最佳实践May 08, 2025 am 12:21 AM

使用依赖注入(DI)的原因是它促进了代码的松耦合、可测试性和可维护性。1)使用构造函数注入依赖，2)避免使用服务定位器，3)利用依赖注入容器管理依赖，4)通过注入依赖提高测试性，5)避免过度注入依赖，6)考虑DI对性能的影响。

PHP性能调整技巧和技巧PHP性能调整技巧和技巧May 08, 2025 am 12:20 AM

phperformancetuningiscialbecapeitenhancesspeedandeffice，whatevitalforwebapplications.1）cachingwithapcureduccureducesdatabaseloadprovesrovesponsemetimes.2）优化

PHP电子邮件安全性：发送电子邮件的最佳实践PHP电子邮件安全性：发送电子邮件的最佳实践May 08, 2025 am 12:16 AM

ThebestpracticesforsendingemailssecurelyinPHPinclude:1)UsingsecureconfigurationswithSMTPandSTARTTLSencryption,2)Validatingandsanitizinginputstopreventinjectionattacks,3)EncryptingsensitivedatawithinemailsusingOpenSSL,4)Properlyhandlingemailheaderstoa

您如何优化PHP应用程序的性能？您如何优化PHP应用程序的性能？May 08, 2025 am 12:08 AM

TOOPTIMIZEPHPAPPLICITIONSFORPERSTORANCE，USECACHING，数据库imization，opcodecaching和SererverConfiguration.1）InlumentCachingWithApcutCutoredSatfetchTimes.2）优化的atabasesbasesebasesebasesbasesbasesbaysbysbyIndexing，BeallancingAndWriteExing

PHP中的依赖注入是什么？PHP中的依赖注入是什么？May 07, 2025 pm 03:09 PM

依赖性注射inphpisadesignpatternthatenhancesFlexibility，可检验性和ManiaginabilybyByByByByByExternalDependencEctenceScoupling.itallowsforloosecoupling，EasiererTestingThroughMocking，andModularDesign，andModularDesign，butquirscarecarefulscarefullsstructoringDovairing voavoidOverOver-Inje

最佳PHP性能优化技术最佳PHP性能优化技术May 07, 2025 pm 03:05 PM

PHP性能优化可以通过以下步骤实现：1)在脚本顶部使用require_once或include_once减少文件加载次数；2)使用预处理语句和批处理减少数据库查询次数；3)配置OPcache进行opcode缓存；4)启用并配置PHP-FPM优化进程管理；5)使用CDN分发静态资源；6)使用Xdebug或Blackfire进行代码性能分析；7)选择高效的数据结构如数组；8)编写模块化代码以优化执行。

PHP性能优化：使用OpCode缓存PHP性能优化：使用OpCode缓存May 07, 2025 pm 02:49 PM

opcodecachingsimplovesphperforvesphpermance bycachingCompiledCode，reducingServerLoadAndResponSetimes.1）itstorescompiledphpcodeinmemory，bypassingparsingparsingparsingandcompiling.2）useopcachebachebachebachebachebachebachebysettingparametersinphametersinphp.ini，likeememeryconmorysmorysmeryplement.33）

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

如何修复KB5055523无法在Windows 11中安装？
4 周前ByDDD
如何修复KB5055518无法在Windows 10中安装？
4 周前ByDDD
<🎜>：种植花园 - 完整的突变指南
2 周前ByDDD
<🎜>：泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前By尊渡假赌尊渡假赌尊渡假赌
如何修复KB5055612无法在Windows 10中安装？
3 周前ByDDD
显示更多

热工具

mPDF

mPDF

mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），

EditPlus 中文破解版

EditPlus 中文破解版

体积小，语法高亮，不支持代码提示功能

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。

SublimeText3 英文版

SublimeText3 英文版

推荐：为Win版本，支持代码提示！

PhpStorm Mac 版本

PhpStorm Mac 版本

最新（2018.2.1 ）专业的PHP集成开发工具

显示更多

热门话题

Java教程
1664
14
CakePHP 教程
1421
52
Laravel 教程
1315
25
PHP教程
1266
29
C# 教程
1239
24
显示更多