当前位置：Gxlcms > PHP教程 > php和ajaxForm如何实现异步带进度条上传文件的实例

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

时间：2021-07-01 10:21:17 帮助过：3人阅读

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

一、首先说用法，ajaxForm可以接收0或1个参数，该参数可以是一个变量、一个对象或回调函数，这个对象主要有以下参数：

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


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

实例具体代码code

htmlcode


  1. <!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异步带进度条上传文件实例代码。" /><!--默认的进度条样式文件
  2. 添加一个带有 class .progress 的 <p>。
  3. 接着，在上面的 <p> 内，添加一个带有 class .progress-bar 的空的 <p>。
  4. 添加一个带有百分比表示的宽度的 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">
  5.     <p class="pk-system-messages"></p>
  6.     <h1 class="uk-h2 uk-text-center" style="margin-top:-100px;">文件上传</h1>
  7.     <p class="pk-system-messages"></p>
  8.     <p class="container-main">
  9.         <h1>文件上传</h1>
  10.         <p>这里只是一个ajax+php+ajaxForm上传文件word文档例子</p>
  11.         <form id='myupload' action='upload.php' method='post' enctype='multipart/form-data'>
  12.             <label for="file">选择上传文件名:</label>
  13.             <input type="file" name="mypic" id="file"><br>
  14.             <input type="submit" name="upload" class="btn btn-success" value="upload">
  15.             <input type='text' name="list" value="555"/>
  16.         </form>
  17.         <p class="progress">
  18.             <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;">
  19.                    <span class="sr-only">10% Complete</span>
  20.            </p>
  21.         </p>
  22.        <p class="files"></p>
  23.        <p class="showimg"></p>     </p>          </p></body><script type="text/javascript">$(function () {
  24.    $("#myupload").ajaxForm({
  25.      dataType:'json',
  26.      beforeSend:function(){ 
  27.          $(".progress").show();
  28.      },
  29.      uploadProgress:function(event,position,total,percentComplete){
  30.          var percentVal = percentComplete + '%';
  31.          $(".progress-bar").width(percentComplete + '%');
  32.          $(".progress-bar").html(percentVal);
  33.          $(".sr-only").html(percentComplete + '%');
  34.      },
  35.      success:function(data){
  36.          $(".progress").hide();
  37.        
  38.          if(data.error == "empty_name"){
  39.              alert("文件上传非法,上传失败!");
  40.              exit();
  41.          };
  42.          if(data.error == "large"){
  43.              alert("图片上传不能大于2M,上传失败!");
  44.              exit();
  45.          };
  46.    
  47.          if(data.error == "format"){
  48.              alert("图片格式错误,上传失败");
  49.              exit();
  50.          };
  51.    
  52.          //$(".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);
  53.          var img = "files/"+data.pic;
  54.          $(".showimg").html("<img src='"+img+"'>");
  55.          alert("上传成功!");
  56.      },
  57.      error:function(){
  58.          alert("上传失败");
  59.      }
  60.        
  61.    });
  62.    $(".progress").hide();
  63. });</script></html>

php上传上传类upload.class.php文件


  1. <?php
  2. date_default_timezone_set("PRC"); //设置时间区域
  3. //上传类class upload{  protected $file_path = "files"; //当前files存储文件夹
  4.   protected $file_size = 5120000; //5M 用户上传
  5.  /**
  6.   *检测文件是否为空  */
  7.  public function check_file($get_file)
  8.  {    if (empty($get_file))
  9.     {        $type = "check_file";        $arr = array('error'=>'empty_name','type'=>$type);        echo json_encode($arr);        exit();
  10.     }  return true;
  11.  } /**
  12.   *检测文件类型  */
  13.  public function check_type($get_type)
  14.  {   if (( $get_type == ".docx" ) || ( $get_type == ".doc" )) {      //这里只是判断上传word文档可以自己添加
  15.    }else{      $type = "check_type";      $arr = array('error'=>'format','type'=>$type);        echo json_encode($arr);        exit(); 
  16.   
  17.    }  return true;
  18.  } /**
  19.   *检测文件大小  */
  20.  public function check_size($get_file)
  21.  {   if ( $get_file != "" ) {      if ( $get_file > $this->file_size ) {          $arr = array('error'=>'large');          echo json_encode($arr);          exit();
  22.       }
  23.   }else{    return false;    exit();
  24.   } return true;
  25.  } /**
  26.   *文件保存  */
  27.  public function save_file($file_type,$file_tmp_name)
  28.  {  $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;
  29.   }else{    return false;    exit();
  30.   }
  31.  }
  32. }?>

ajax提交php处理文件upload.php


  1. <?phpinclude("upload.class.php");$up_obj = new upload();//获取上传文件名$get_fileName = $_FILES['mypic']['name']; 
  2. $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);//检查文件类型
  3.   if($result_type){    $result_size = $up_obj->check_size($get_fileSize);//检查文件大小
  4.     if($result_size){      $pics = $up_obj->save_file($get_fileType,$get_TmpFiles); //文件上传保存     
  5.       $size = round($get_fileSize/1024,2);          $arr = array(            'name' => $get_fileName,
  6.              'pic' => $pics,
  7.              'size'=> $size,
  8.              'error' => 2,
  9.              'list'  =>$_POST['list']
  10.          );       if($pics){ //检查文件上传状态
  11.          echo json_encode($arr);
  12.       }   
  13.     }
  14.   }
  15.   
  16. }?>

以上就是php和ajaxForm如何实现异步带进度条上传文件的实例的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！