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

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

前端引入文件

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

Ajax进度条异步处理

lt;script type="text/javascript"gt;
$(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("lt;bgt;"+data.name+"("+data.size+"k)lt;/bgt; lt;span class='delimg' rel='"+data.pic+"'gt;删除lt;/spangt;");
         $(".files").html("文件名: "+data.name+"lt;span class='delimg' rel='"+data.pic+"'gt;  del  lt;/spangt;大小："+data.size);
         var img = "http://www.sandleft.com/test/input/upload/files/"+data.pic;
         $(".showimg").html("lt;img src='"+img+"'gt;");
         alert("上传成功!");
     },
     error:function(){
         alert("图片上传失败");
     }
      
   });
   $(".progress").hide();
});
 
lt;/scriptgt;

前端上传HTML

lt;div class="uk-container uk-container-center"gt;
 
        lt;div class="pk-system-messages"gt;lt;/divgt;
 
        lt;h1 class="uk-h2 uk-text-center" style="margin-top:-100px;"gt;文件上传lt;/h1gt;
        lt;div class="pk-system-messages"gt;lt;/divgt;
 
         lt;div class="container-main"gt;
          lt;h1gt;Ajax Image Uploaderlt;/h1gt;
          lt;pgt;A simple tutorial to explain image uploading using jquery ajax and phplt;/pgt;
  
           lt;form id='myupload' action='new_upload.php' method='post' enctype='multipart/form-data'gt;
            lt;label for="file"gt;Filename:lt;/labelgt;
           lt;input type="file" name="mypic" id="file"gt;lt;brgt;
           lt;input type="submit" name="upload" class="btn btn-success" value="upload"gt;
          lt;/formgt;
  
            lt;div class="progress"gt;
             lt;div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%"gt;
              lt;span class="sr-only"gt;0% Completelt;/spangt;
           lt;/divgt;
           lt;/divgt;
          lt;div class="files"gt;lt;/divgt;
          lt;div class="showimg"gt;lt;/divgt;
         lt;/divgt;
         
       lt;/divgt;

PHP文件上传类

lt;#63;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'=gt;'empty_name','type'=gt;$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'=gt;'format','type'=gt;$type);
        echo json_encode($arr);
        exit(); 
 
   }
  return true;
 }
 
 //检测文件大小
 public function check_size($get_file)
 {
   if ( $get_file != "" ) {
      if ( $get_file gt; $this-gt;file_size ) {
          $arr = array('error'=gt;'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-gt;file_path."/".$pics;
  $result = move_uploaded_file($file_tmp_name, $path);
  if($result){
    return $pics;
  }else{
    return false;
    exit();
  }
  #return $pics;
 }
 
}
PHP文件上传处理
lt;#63;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-gt;check_file($get_fileName);
 
if($check_result){
 
  //检查文件类型
  $result_type = $up_obj-gt;check_type($get_fileType);
 
  //检查文件大小
  if($result_type){
 
    $result_size = $up_obj-gt;check_size($get_fileSize);
 
    if($result_size){
      //文件上传保存  
      $pics = $up_obj-gt;save_file($get_fileType,$get_TmpFiles);   
      $size = round($get_fileSize/1024,2);
          $arr = array(
            'name' =gt; $get_fileName,
             'pic' =gt; $pics,
             'size'=gt; $size,
             'error' =gt; 2
         );
 
       //检查文件上传状态
       if($pics){
         echo json_encode($arr);
         /*
         执行上传完成逻辑.....
         */
      }   
    }
  }
 
}

文件上传效果如图：

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

（编辑：淮北站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!