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);
         /*
                 .....
         */
      }   
    }
  }
 
}
파일 업로드 효 과 는 다음 과 같 습 니 다:

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기