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下通过POST还是GET来传值
Jun 05 PHP
PHP下通过系统信号量加锁方式获取递增序列ID
Sep 25 PHP
php面向对象全攻略 (十六) 对象的串行化
Sep 30 PHP
PHP XML操作的各种方法解析(比较详细)
Jun 17 PHP
php判断GIF图片是否为动画的方法
Sep 04 PHP
2014年最新推荐的10款 PHP 开发框架
Aug 01 PHP
thinkphp中memcache的用法实例
Nov 29 PHP
php使用socket post数据到其它web服务器的方法
Jun 02 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
May 28 PHP
thinkPHP框架整合tcpdf插件操作示例
Aug 07 PHP
使用laravel指定日志文件记录任意日志
Oct 17 PHP
如何在PHP中使用数组
Jun 09 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
用户的详细注册和判断
2006/10/09 PHP
10条PHP高级技巧[修正版]
2011/08/02 PHP
PHP mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
PHP调用VC编写的COM组件实例
2014/03/29 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
PHP实现ASCII码与字符串相互转换的方法
2017/04/29 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
Vue实现简单分页器
2018/12/29 Javascript
webpack4之如何编写loader的方法步骤
2019/06/06 Javascript
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
Python版微信红包分配算法
2015/05/04 Python
Python上传package到Pypi(代码简单)
2016/02/06 Python
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
python模块之re正则表达式详解
2017/02/03 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
Python查看微信撤回消息代码
2018/06/07 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
htnl5利用svg页面高斯模糊的方法
2018/07/20 HTML / CSS
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
苹果Mac升级:MacSales.com
2017/11/20 全球购物
宾馆总经理岗位职责
2014/02/14 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
老公保证书怎么写
2015/02/26 职场文书
刑事附带民事起诉状
2015/05/19 职场文书