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

 更新时间:2016年11月01日 08:41:53   作者:myxp   我要评论

这篇文章主要介绍了PHP+Ajax异步带进度条上传文件实例代码,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下。

最近项目中要做一个带进度条的上传文件的功能,学习了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);
         /*
         执行上传完成逻辑.....
         */
      }   
    }
  }
 
}

文件上传效果如图:

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

相关文章

  • Laravel中如何增加自定义全局函数详解

    Laravel中如何增加自定义全局函数详解

    在我们的应用里经常会有一些全局都可能会用的函数,我们应该怎么自定义它比较好呢?字啊么这篇文章主要给大家介绍了在Laravel中如何增加自定义全局函数的相关资料,文中给出了两种实现方法,需要的朋友可以参考,下面来一起看看吧。
    2017-05-05
  • PHP校验15位和18位身份证号的类封装

    PHP校验15位和18位身份证号的类封装

    这篇文章主要介绍了PHP校验15位和18位身份证号,需要的朋友可以参考下
    2018-11-11
  • php小型企业库存管理系统的设计与实现代码

    php小型企业库存管理系统的设计与实现代码

    双专业毕业论文做了一个小型企业库存管理系统,使用PHP&mysql组合进行开发。头一次开发稍微大一点的东西,php也是自学的
    2011-05-05
  • Thinkphp中volist标签mod控制一定记录的换行BUG解决方法

    Thinkphp中volist标签mod控制一定记录的换行BUG解决方法

    这篇文章主要介绍了Thinkphp中volist标签mod控制一定记录的换行BUG解决方法,涉及针对标签执行语句顺序的修改,非常具有实用价值,需要的朋友可以参考下
    2014-11-11
  • php遍历数组的4种方法总结

    php遍历数组的4种方法总结

    这篇文章主要介绍了php遍历数组的4种方法总结,它分分别是foreach循环、each函数、list函数、for循环,需要的朋友可以参考下
    2014-07-07
  • Laravel 5.4向IoC容器中添加自定义类的方法示例

    Laravel 5.4向IoC容器中添加自定义类的方法示例

    Laravel这个框架,用起来方便,理解起来不简单。为什么不简单?因为包含了一大堆所谓“先进”的概念,其中依赖注入(DI)和Ioc容器是比较核心的内容之一。下面这篇文章主要给大家介绍了关于Laravel 5.4向IoC容器中添加自定义类的相关资料,需要的朋友可以参考下。
    2017-08-08
  • Thinkphp 空操作、空控制器、命名空间(详解)

    Thinkphp 空操作、空控制器、命名空间(详解)

    下面小编就为大家带来一篇Thinkphp 空操作、空控制器、命名空间(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • Zend Framework教程之Resource Autoloading用法实例

    Zend Framework教程之Resource Autoloading用法实例

    这篇文章主要介绍了Zend Framework教程之Resource Autoloading用法,结合实例形式分析了Resource Autoloading实现自动加载的原理及具体使用方法,需要的朋友可以参考下
    2016-03-03
  • 浅谈PHP匿名函数和闭包

    浅谈PHP匿名函数和闭包

    这篇文章主要介绍了PHP匿名函数和闭包,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • PHP XML备份Mysql数据库

    PHP XML备份Mysql数据库

    以下是在Linux下通过Apache+PHP对Mysql数据库的备份的文件代码
    2009-05-05

最新评论