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 相关文章推荐
nginx+php-fpm配置文件的组织结构介绍
Nov 07 PHP
如何使用PHP计算上一个月的今天
May 23 PHP
分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)
Jan 30 PHP
PHP 只允许指定IP访问(允许*号通配符过滤IP)
Jul 08 PHP
php随机显示指定文件夹下图片的方法
Jul 13 PHP
php微信高级接口群发 多客服
Jun 23 PHP
Yii2中cookie用法示例分析
Jul 18 PHP
php微信开发之百度天气预报
Nov 18 PHP
php之header的不同用法总结(实例讲解)
Nov 28 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
Sep 30 PHP
laravel框架上传图片实现实时预览功能
Oct 14 PHP
PHP实现页面静态化深入讲解
Mar 04 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
You might like
php实现用户在线时间统计详解
2011/10/08 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
关于php几种字符串连接的效率比较(详解)
2017/02/22 PHP
jquery 关于event.target使用的几点说明介绍
2013/04/26 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
基于jQuery实现美观且实用的倒计时实例代码
2015/12/30 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
Python udp网络程序实现发送、接收数据功能示例
2019/12/09 Python
python中实现词云图的示例
2020/12/19 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
旅游管理本科生求职信
2013/10/14 职场文书
兽医医药专业求职信
2014/07/27 职场文书
园艺专业毕业生求职信
2014/09/02 职场文书
文明倡议书
2015/01/19 职场文书
2016春节放假通知范文
2015/08/18 职场文书
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL