首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

PHP+AjaxForm异步带进度条上传文件实例代码

Posted in PHP onAugust 14, 2017

在使用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" rel="external nofollow" > 
<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);
   }  
  }
 }
}
?>

总结

以上所述是小编给大家介绍的PHP+AjaxForm异步带进度条上传文件实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

PHP+AjaxForm异步带进度条上传文件实例代码

- Author -

mrr

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
PHP 面向对象实现代码
Nov 11 PHP
解析php中die(),exit(),return的区别
Jun 20 PHP
解析php多线程下载远程多个文件
Jun 25 PHP
php实现refresh刷新页面批量导入数据的方法
Dec 23 PHP
php判断数组中是否存在指定键(key)的方法
Mar 17 PHP
PHP进程通信基础之信号量与共享内存通信
Feb 19 PHP
老生常谈php中传统验证与thinkphp框架(必看篇)
Jun 10 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
Feb 10 PHP
php微信公众号开发之音乐信息
Oct 20 PHP
php中的explode()函数实例介绍
Jan 18 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
Apr 06 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
Mar 09 PHP
利用laravel搭建一个迷你博客实战教程
Aug 13 #PHP
利用laravel+ajax实现文件上传功能方法示例
Aug 13 #PHP
Laravel5.5新特性之友好报错以及展示详解
Aug 13 #PHP
php数据序列化测试实例详解
Aug 12 #PHP
PHP新特性之字节码缓存和内置服务器
Aug 11 #PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
Aug 11 #PHP
如何修改Laravel中url()函数生成URL的根地址
Aug 11 #PHP
俄罗斯购物网站(137) 印尼购物网站(37) 德国购物网站(227) 墨西哥购物网站(16) 印度购物网站(45) 日本购物网站(72) 西班牙购物网站(115) 埃及购物网站(2) 瑞士购物网站(28) 马来西亚购物网站(41)
You might like
PHP＋AJAX实现无刷新注册（带用户名实时检测）
2007/01/02 PHP
php中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
javascript event 事件解析
2011/01/31 Javascript
详谈 Jquery Ajax异步处理Json数据.
2011/09/09 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
深入理解javascript中return的作用
2013/12/30 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
js实现可爱的气泡特效
2020/09/05 Javascript
JavaScript实现图片合成下载的示例
2020/11/19 Javascript
王纯业的Python学习笔记 下载
2007/02/10 Python
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
Python谱减法语音降噪实例
2019/12/18 Python
Columbia Sportswear法国官网：全球户外品牌
2020/09/25 全球购物
大学生自我鉴定
2013/12/16 职场文书
安全先进班组材料
2014/12/26 职场文书
晚会开幕词
2015/01/28 职场文书
中考学习决心书
2015/02/04 职场文书
教师辞职信范文
2015/02/28 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js