在使用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 　　　　　 　 //设置请求时间，超过该时间后，自动退出请求，单位(毫秒)。　　

}

  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">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="X-UA-Compatible" content="IE=7" />
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta name="ROBOTS" content="NOODP">
  7. <title>PHP+Ajax异步带进度条上传文件实例_php</title>
  8. <meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
  9. <meta name="keywords" content="php,ajax异步上传文件,ajax,异步加载,进度条,php,ajax上传进度条" />
  10. <meta name="description" content="这篇文章主要介绍了PHP+Ajax异步带进度条上传文件实例代码。" />
  11. <!--默认的进度条样式文件
  12. 添加一个带有 class .progress 的 <div>。
  13. 接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
  14. 添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置
  15. -->
  16. <link rel="stylesheet" href="public/css/bootstrap.min.css">
  17. <script src="public/js/jquery.min.js"></script>
  18. <script src="public/js/jquery.form.js"></script> <!--ajaxForm 提交form表单数据无刷新处理数据-->
  19. </head>
  20. <body>
  21. <div class="uk-container uk-container-center">
  22.     <div class="pk-system-messages"></div>
  23.     <h1 class="uk-h2 uk-text-center" style="margin-top:-100px;">文件上传</h1>
  24.     <div class="pk-system-messages"></div>
  25.     <div class="container-main">
  26.         <h1>文件上传</h1>
  27.         <p>这里只是一个ajax+php+ajaxForm上传文件word文档例子</p>
  28.         <form id='myupload' action='upload.php' method='post' enctype='multipart/form-data'>
  29.             <label for="file">选择上传文件名:</label>
  30.             <input type="file" name="mypic" id="file"><br>
  31.             <input type="submit" name="upload" class="btn btn-success" value="upload">
  32.             <input type='text' name="list" value="555"/>
  33.         </form>
  34.         <div class="progress">
  35.             <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;">
  36.                    <span class="sr-only">10% Complete</span>
  37.            </div>
  38.         </div>
  39.        <div class="files"></div>
  40.        <div class="showimg"></div>
  41.      </div>
  42.           
  43. </div>
  44. </body>
  45. <script type="text/javascript">
  46. $(function () {
  47.    $("#myupload").ajaxForm({
  48.      dataType:'json',
  49.      beforeSend:function(){
  50.          $(".progress").show();
  51.      },
  52.      uploadProgress:function(event,position,total,percentComplete){
  53.          var percentVal = percentComplete + '%';
  54.          $(".progress-bar").width(percentComplete + '%');
  55.          $(".progress-bar").html(percentVal);
  56.          $(".sr-only").html(percentComplete + '%');
  57.      },
  58.      success:function(data){
  59.          $(".progress").hide();
  60.        
  61.          if(data.error == "empty_name"){
  62.              alert("文件上传非法,上传失败!");
  63.              exit();
  64.          };
  65.          if(data.error == "large"){
  66.              alert("图片上传不能大于2M,上传失败!");
  67.              exit();
  68.          };
  69.    
  70.          if(data.error == "format"){
  71.              alert("图片格式错误,上传失败");
  72.              exit();
  73.          };
  74.    
  75.          //$(".files").html("<b>"+data.name+"("+data.size+"k)</b> <span class='delimg' rel='"+data.pic+"'>删除</span>");
  76.          $(".files").html("文件名: "+data.name+"<span class='delimg' rel='"+data.pic+"'>  del  </span>大小："+data.size);
  77.          var img = "files/"+data.pic;
  78.          $(".showimg").html("<img src='"+img+"'>");
  79.          alert("上传成功!");
  80.      },
  81.      error:function(){
  82.          alert("上传失败");
  83.      }
  84.        
  85.    });
  86.    $(".progress").hide();
  87. });
  88. </script>
  89. </html>

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

  1. <?php
  2. date_default_timezone_set("PRC"); //设置时间区域
  3. //上传类
  4. class upload{
  5.   protected $file_path = "files"; //当前files存储文件夹
  6.   protected $file_size = 5120000; //5M 用户上传
  7.  /**
  8.   *检测文件是否为空
  9.   */
  10.  public function check_file($get_file)
  11.  {
  12.     if (empty($get_file))
  13.     {
  14.         $type = "check_file";
  15.         $arr = array('error'=>'empty_name','type'=>$type);
  16.         echo json_encode($arr);
  17.         exit();
  18.     }
  19.   return true;
  20.  }
  21.  /**
  22.   *检测文件类型
  23.   */
  24.  public function check_type($get_type)
  25.  {
  26.    if (( $get_type == ".docx" ) || ( $get_type == ".doc" )) {
  27.       //这里只是判断上传word文档可以自己添加
  28.    }else{
  29.       $type = "check_type";
  30.       $arr = array('error'=>'format','type'=>$type);
  31.         echo json_encode($arr);
  32.         exit(); 
  33.  
  34.    }
  35.   return true;
  36.  }
  37.  /**
  38.   *检测文件大小
  39.   */
  40.  public function check_size($get_file)
  41.  {
  42.    if ( $get_file != "" ) {
  43.       if ( $get_file > $this->file_size ) {
  44.           $arr = array('error'=>'large');
  45.           echo json_encode($arr);
  46.           exit();
  47.       }
  48.   }else{
  49.     return false;
  50.     exit();
  51.   }
  52.  return true;
  53.  }
  54.  /**
  55.   *文件保存
  56.   */
  57.  public function save_file($file_type,$file_tmp_name)
  58.  {
  59.   $rand = rand(1000, 9999);
  60.   $pics =date('YmdHis') . $rand . $file_type;
  61.   $path = $this->file_path."/".$pics;
  62.   $result = move_uploaded_file($file_tmp_name, $path);
  63.   if($result){
  64.     return $pics;
  65.   }else{
  66.     return false;
  67.     exit();
  68.   }
  69.  }
  70. }
  71. ?>

ajax提交php处理文件upload.php

  1. <?php
  2. include("upload.class.php");
  3. $up_obj = new upload();
  4. //获取上传文件名
  5. $get_fileName = $_FILES['mypic']['name'];
  6. $get_fileSize = $_FILES['mypic']['size'];
  7. $get_TmpFiles = $_FILES['mypic']['tmp_name'];
  8. $get_fileType = strstr($get_fileName, '.');
  9. $check_result = $up_obj->check_file($get_fileName);
  10. if($check_result){
  11.   $result_type = $up_obj->check_type($get_fileType);//检查文件类型
  12.   if($result_type){
  13.     $result_size = $up_obj->check_size($get_fileSize);//检查文件大小
  14.     if($result_size){
  15.       $pics = $up_obj->save_file($get_fileType,$get_TmpFiles); //文件上传保存
  16.       $size = round($get_fileSize/1024,2);
  17.           $arr = array(
  18.             'name' => $get_fileName,
  19.              'pic' => $pics,
  20.              'size'=> $size,
  21.              'error' => 2,
  22.              'list'  =>$_POST['list']
  23.          );
  24.        if($pics){ //检查文件上传状态
  25.          echo json_encode($arr);
  26.       }
  27.     }
  28.   }
  29.  
  30. }
  31. ?>

实例文件百度网盘下载地址：http://pan.baidu.com/s/1cdFXmu

密码：d1fr

PHP+ajaxForm异步带进度条上传文件实例的更多相关文章

  1. ajax利用html5新特性带进度条上传文件

    http://blog.csdn.net/pkgray/article/details/27591283 http://www.matlus.com/html5-file-upload-with-pr ...

  2. ajax-属性、原理、实现html5进度条上传文件

    一.远古ajax实现方式如下: 1.前端请求后台,后台设置返回 http状态码204 2.运用img图片(或css/javascript等)的加载机制,请求后台 3.post提交数据,运用iframe ...

  3. 赞！带进度条的 jQuery 文件拖放上传插件

    jQuery File Uploader 是一个 jQuery 文件拖放上传插件,包括 Ajax 上传和进度条效果.作者编写这个插件的想法是要保持它非常简单,不像其他的插件,很多的标记,并提供一些 H ...

  4. HTTP的上传文件实例分析

    这个是http文件传输的一种格式,当时不知道这种格式,废弃. HTTP的上传文件实例分析 由于论坛不支持Word写文章发帖. 首先就是附件发送怎么搞,这个必须解决.论坛是php的.我用Chrome类浏 ...

  5. jQuery ajax上传文件实例

    jQuery ajax上传文件实例 <form id="form" enctype="multipart/form-data"><input ...

  6. 使用python3.7+Vue.js2.0+Django2.0.4异步前端通过api上传文件到七牛云云端存储

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_130 之前一篇文章是通过普通js+tornado来上传七牛云:使用Tornado配合七牛云存储api来异步切分上传文件,本次使用v ...

  7. php 上传文件实例 上传并下载word文件

    上传界面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  8. JSP通过SmartUpload上传文件实例

    httpRequest.setCharacterEncoding("gbk"); String preName = genName.doMake();//设置文件前缀名 Strin ...

  9. HttpClient 测试web API上传文件实例

    1.使用HttpClient 测试上传文件并且设置header信息: using Lemon.Common; using Newtonsoft.Json; using System; using Sy ...

随机推荐

  1. [ABP框架]动态web Api的拦截用法。

    先进行配置 首先这种需求,一般发生在APP端,我们给APP,不会给所有项目系统的接口给他们用.我们系统有200个接口,但是APP的需求只会用20个.那么这个需求也就应运而生了. 以上为API文件夹中为 ...

  2. 第二章（jQuery选择器）

    2.1jQuery选择器是什么 1.CSS选择器 选择器 示例 选择器 示例 标签选择器 a{ } p{ } ul{ } ID选择器 #ID{ } 类选择器 .class{ } 群组选择器 td,p, ...

  3. weblogic 部署问题定位与解决

    weblogic 做为商用中间件在(EJB.jndi 数据源.日志管理.内存管理.资源配置管理...)  是一些开源免费小型容器无法望其项背的. weblogic 最早由 weblogic Inc. ...

  4. c# 测试通过

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data; using S ...

  5. 使用hexdump追踪FAT32文件系统中的一个文件

    最近在看文件系统基础结构等知识,本来重点是想看EXT4文件系统,但是目前没有找到比较详细说明EXT4文件系统详细结构的,用EXT3的对应着找结果有点出入,在想是不是我用hexdump的参数有问题,于是 ...

  6. （转载）CloseableHttpClient设置Timeout

    参考文档: http://blog.csdn.net/zheng0518/article/details/46469051 https://segmentfault.com/a/11900000005 ...

  7. biz-NewsService

    package com.pb.news.service; import java.util.List; import com.pb.news.entity.News; public interface ...

  8. Chrome浏览器扩展开发系列之十五：跨域访问的XMLHttpRequest对象

    XMLHttpRequest对象是W3C的标准API,用于访问服务器资源.XMLHttpRequest对象支持多种文本格式,如XML和JSON等.XMLHttpRequest对象可以通过HTTP和HT ...

  9. 合格的IT人士需要养成的习惯：设置系统还原点

    系统还原可帮助您将计算机的系统文件及时还原到早期的还原点.此方法可以在不影响个人文件(比如电子邮件.文档.照片等)的情况下,撤销对计算机的系统更改.有时,安装一个程序或驱动程序会导致对计算机的异常更改 ...

  10. xtrabackup备份mysql数据库的使用方法

    xtrabackup是由percona提供的mysql备份工具,它是一款物理备份工具,通过连接数据库把数据库的数据备份出来.对于innodb存储引擎其支持全量备份和增量备份.对于myisam存储引擎只 ...