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 相关文章推荐
第二节--PHP5 的对象模型
Nov 16 PHP
使用PHP 5.0创建图形的巧妙方法
Oct 12 PHP
PHPMailer邮件发送的实现代码
May 04 PHP
8个必备的PHP功能实例代码
Oct 27 PHP
php时间戳转换的示例
Mar 31 PHP
PHP取余函数介绍MOD(x,y)与x%y
May 15 PHP
PHP过滤黑名单关键字的方法
Dec 01 PHP
Windows下编译PHP5.4和xdebug全记录
Apr 03 PHP
Docker配置PHP开发环境教程
Dec 21 PHP
php实现构建排除当前元素的乘积数组方法
Oct 06 PHP
thinkphp5框架扩展redis类方法示例
May 06 PHP
PHP抽象类和接口用法实例详解
Jul 20 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函数getenv简介和使用实例
2014/05/12 PHP
PHP实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
JavaScript 程序编码规范
2010/11/23 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
2018/09/07 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
2019/03/12 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
python多重继承实例
2014/10/11 Python
python获得一个月有多少天的方法
2015/06/04 Python
python实现八大排序算法(2)
2017/09/14 Python
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
详解python配置虚拟环境
2019/04/08 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
柯基袜:Corgi Socks
2017/01/26 全球购物
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
求职推荐信
2013/10/28 职场文书
直接有效的自我评价
2014/01/11 职场文书
在校生自我鉴定
2014/01/23 职场文书
药店促销活动策划方案
2014/08/24 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书