三沣开发知识 购物 网址 游戏 小说 股票 美女 租车 短信 新闻 笑话 | 开发 汉字 下载 软件 图书馆
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题
autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml
html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
  IT知识库 -> PHP -> PHP+ajaxForm异步带进度条上传文件实例 -> 正文阅读
 

[PHP]PHP+ajaxForm异步带进度条上传文件实例

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 最新文章
php memcache 扩展 php
yii2 commands模式以及配置crontab定时任务
html模板生成静态页面及模板分页处理
利用 fsockopen() 函数开放端口扫描器
php的二维数组排序
PHP接收post请求,不是空数组就是没值,怎么
PHP CURL访问HTTPS使用详解
[Laravel] Laravel的基本数据库操作部分
php使用file函数、fseek函数读取大文件效率
74cms 骑士人才系统源码
上一篇文章      下一篇文章      查看所有文章
加:2017-08-12 23:24:53  更:2017-08-12 23:24:59 
 
技术频道: 站长资讯 .NET新手区 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA Visual Studio ASP.NET MVC .NET控件开发 Entity Framework WinRT/Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动设计 Html/Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP Oracle ERP Dynamics CRM K2 BPM 信息安全 企业信息化其他 Android开发 iOS开发 Windows Phone Windows Mobile 其他手机开发 敏捷开发 项目与团队管理 软件工程其他 SQL Server Oracle MySQL NoSQL 其它数据库 Windows 7 Windows Server Linux
脚本语言: vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程
网站开发: CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture 股票 租车
生肖星座 三丰软件 视频 开发 短信 Android开发 站长 古典小说 网文精选 搜图网 美图 中国文化英文版 多播 租车 短信
2017-8-19 3:58:58
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT知识库