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 相关文章推荐
自动跳转中英文页面
Oct 09 PHP
mysql 中InnoDB和MyISAM的区别分析小结
Apr 15 PHP
PHP的SQL注入过程分析
Jan 06 PHP
php header功能的使用
Oct 28 PHP
php中instanceof 与 is_a()区别分析
Mar 03 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
Jan 22 PHP
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
Apr 17 PHP
PHP flush 函数使用注意事项
Aug 26 PHP
php提交表单时保留多个空格及换行的文本样式的方法
Jun 20 PHP
PHP生成随机数的方法总结
Mar 01 PHP
PHP正则验证字符串是否为数字的两种方法并附常用正则
Feb 27 PHP
解决laravel 出现ajax请求419(unknown status)的问题
Sep 03 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
资料注册后发信小技巧
2006/10/09 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
大家未必知道的Js技巧收藏
2008/04/07 Javascript
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
js post提交调用方法
2014/02/12 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
Python run()函数和start()函数的比较和差别介绍
2020/05/03 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
学生会竞选自荐信
2013/10/12 职场文书
索桥的故事教学反思
2014/02/06 职场文书
策划总监岗位职责
2014/02/16 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
消防演习感想
2015/08/10 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers