PHP+Ajax异步带进度条上传文件实例


Posted in PHP onNovember 01, 2016

最近项目中要做一个带进度条的上传文件的功能,学习了Ajax,使用起来比较方便,将几个方法实现就行。

前端引入文件

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>

Ajax进度条异步处理

<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();
         };
  
 /*alert(data.error);*/
         if(data.error == "format"){
             alert("图片格式错误,上传失败");
             //alert(data.type);
             exit();
         };
  
         //alert("上传成功!");
         //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 = "http://www.sandleft.com/test/input/upload/files/"+data.pic;
         $(".showimg").html("<img src='"+img+"'>");
         alert("上传成功!");
     },
     error:function(){
         alert("图片上传失败");
     }
      
   });
   $(".progress").hide();
});
 
</script>

前端上传HTML

<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>Ajax Image Uploader</h1>
          <p>A simple tutorial to explain image uploading using jquery ajax and php</p>
  
           <form id='myupload' action='new_upload.php' method='post' enctype='multipart/form-data'>
            <label for="file">Filename:</label>
           <input type="file" name="mypic" id="file"><br>
           <input type="submit" name="upload" class="btn btn-success" value="upload">
          </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%">
              <span class="sr-only">0% Complete</span>
           </div>
           </div>
          <div class="files"></div>
          <div class="showimg"></div>
         </div>
         
       </div>

PHP文件上传类

<?php
class upload{
 
  protected $file_path = "files"; //当前files存储文件夹
  #protected $file_size = 1024000;
  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" )) {
      #$types = $get_type;
   }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();
  }
  #return $pics;
 }
 
}
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
         );
 
       //检查文件上传状态
       if($pics){
         echo json_encode($arr);
         /*
         执行上传完成逻辑.....
         */
      }   
    }
  }
 
}

文件上传效果如图:

PHP+Ajax异步带进度条上传文件实例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
php 注释规范
Mar 29 PHP
php实现12306火车票余票查询和价格查询(12306火车票查询)
Jan 14 PHP
php中将一个对象保存到Session中的方法
Mar 13 PHP
php编程每天必学之表单验证
Mar 01 PHP
PHP 绘制网站登录首页图片验证码
Apr 12 PHP
php实现在线通讯录功能(附源码)
May 13 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
Oct 17 PHP
Android AsyncTack 异步任务实例详解
Nov 02 PHP
php单元测试phpunit入门实例教程
Nov 17 PHP
PDO::errorInfo讲解
Jan 28 PHP
PHP getNamespaces()函数讲解
Feb 03 PHP
Laravel框架查询构造器 CURD操作示例
Sep 04 PHP
php 判断字符串编码是utf-8 或gb2312实例
Nov 01 #PHP
PHP用户验证和标签推荐的简单使用
Oct 31 #PHP
PHP实现小偷程序实例
Oct 31 #PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
Oct 31 #PHP
利用php做服务器和web前端的界面进行交互
Oct 31 #PHP
php将服务端的文件读出来显示在web页面实例
Oct 31 #PHP
PDO的安全处理与事物处理方法
Oct 31 #PHP
You might like
用php实现批量查询清除一句话后门的代码
2008/01/20 PHP
用PHP进行MySQL删除记录操作代码
2008/06/07 PHP
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
js 函数调用模式小结
2011/12/26 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
2013/12/31 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
uni-app 自定义底部导航栏的实现
2020/12/11 Javascript
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
python安装mysql-python简明笔记(ubuntu环境)
2016/06/25 Python
Python简单的制作图片验证码实例
2017/05/31 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
pytorch构建多模型实例
2020/01/15 Python
Python实现一个论文下载器的过程
2021/01/18 Python
CSS3中的常用选择器使用示例整理
2016/06/13 HTML / CSS
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
2014年大学生就业规划书
2014/04/04 职场文书
财务检查整改报告
2014/11/06 职场文书