Php+ajax Asynchronous Belt progress bar upload file Instance _php instance

The recent project to do with a progress bar upload file function, learning Ajax, easy to use, a few methods to achieve on the line.

Front End Introduction File

<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 progress bar Asynchronous processing

<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 ("File upload illegal, upload failed!");
         Exit ();
         };
             if (Data.error = = "Large") {alert ("image upload can not be greater than 2M, upload failed!");
         Exit ();
  
 };
             /*alert (data.error); */if (data.error = "format") {alert ("Bad picture format, upload failed");
             alert (Data.type);
         Exit ();
  
         };
         Alert ("Upload success!"); Files.html ("<b>" +data.name+ "(" +data.size+ "K) </b> <span class= ' delimg ' rel= ' "+data.pic+" ' > Delete </span> '); $ (". Files"). HTML ("FileName:" +data.name+ "<span class= ' delimg ' rel= '" +data.pic+ "' > del </span> Size:" +data.size)
         ;
         var img = "http://www.sandleft.com/test/input/upload/files/" +DATA.PIC;
         $ (". Showimg"). HTML ("

Front-end upload HTML

<div class= "Uk-container uk-container-center" > <div class= "pk-system-messages" ></div> 
 

PHP File Upload class

<?php class upload{protected $file _path = "files";//Current Files Storage folder #protected $file _size = 1024000; protected $file _size = 5120000; 5M user upload//detect file is null 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; }//Detect file Type 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; }//Detect file Size public function check_size ($get _file) {if ($get _file!= "") {if ($get _file > $this->fi
          le_size) {$arr = array (' ERROR ' => ' large ');
          echo Json_encode ($arr);
      Exit ();
    }}else{return false;
  Exit (); } RETurn true;
  //File Save 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 file Upload processing <?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) {//Check file type $result _type = $up _obj->check_type ($get _filetype);
 
    Check the file size if ($result _type) {$result _size = $up _obj->check_size ($get _filesize);   
      if ($result _size) {//File upload save $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);
         Check the file upload status if ($pics) {echo json_encode ($arr);
 /* Execute upload completion logic .... *}}}

File upload effect as shown:

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.