简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  développement back-end  >  Exemple de la façon dont php et ajaxForm implémentent le téléchargement de fichiers asynchrone avec barre de progression

Exemple de la façon dont php et ajaxForm implémentent le téléchargement de fichiers asynchrone avec barre de progression

黄舟
黄舟original
2017-08-13 09:10:142011parcourir

Avant d'utiliser la méthode ajaxForm, vous devez d'abord installer le plug-in form.js, qui est disponible en ligne

1. Parlons d'abord de l'utilisation d'ajaxForm peut recevoir 0 ou 1 paramètre, qui peut être une variable, un Objet ou une fonction de rappel. Cet objet possède principalement les paramètres suivants : 

var object= {
                     url:url,　　　　　　//form提交数据的地址
　　　　　　  type:type,　　　  //form提交的方式(method:post/get)
　　　　　　  target:target,　　//服务器返回的响应数据显示的元素(Id)号
                      beforeSerialize:function(){} //序列化提交数据之前的回调函数
　　　　　　  beforeSubmit:function(){},　　//提交前执行的回调函数
　　　　　　  success:function(){},　　　　   //提交成功后执行的回调函数
                      error:function(){},             //提交失败执行的函数
　　　　　　  dataType:null,　　　　　　　//服务器返回数据类型
　　　　　　  clearForm:true,　　　　　　 //提交成功后是否清空表单中的字段值
　　　　　　  restForm:true,　　　　　　  //提交成功后是否重置表单中的字段值，即恢复到页面加载时的状态
　　　　　　  timeout:6000 　　　　　 　 //设置请求时间，超过该时间后，自动退出请求，单位(毫秒)。　　
}
ajaxForm js的code


$(function(){
   $("form").ajaxForm(object)；
})

Code spécifique à l'instance

code HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="X-UA-Compatible" content="IE=7" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="ROBOTS" content="NOODP"><title>PHP+Ajax异步带进度条上传文件实例_php</title><meta http-equiv="X-UA-Compatible" content="IE=EDGE" /><meta name="keywords" content="php,ajax异步上传文件,ajax,异步加载,进度条,php,ajax上传进度条" /><meta name="description" content="这篇文章主要介绍了PHP+Ajax异步带进度条上传文件实例代码。" /><!--默认的进度条样式文件
添加一个带有 class .progress 的 <p>。
接着，在上面的 <p> 内，添加一个带有 class .progress-bar 的空的 <p>。
添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置--><link rel="stylesheet" href="public/css/bootstrap.min.css"> <script src="public/js/jquery.min.js"></script><script src="public/js/jquery.form.js"></script> <!--ajaxForm 提交form表单数据无刷新处理数据--></head><body><p class="uk-container uk-container-center">
    <p class="pk-system-messages"></p>
    <h1 class="uk-h2 uk-text-center" style="margin-top:-100px;">文件上传</h1>
    <p class="pk-system-messages"></p>
    <p class="container-main">
        <h1>文件上传</h1>
        <p>这里只是一个ajax+php+ajaxForm上传文件word文档例子</p>
        <form id=&#39;myupload&#39; action=&#39;upload.php&#39; method=&#39;post&#39; enctype=&#39;multipart/form-data&#39;>
            <label for="file">选择上传文件名:</label>
            <input type="file" name="mypic" id="file"><br>
            <input type="submit" name="upload" class="btn btn-success" value="upload">
            <input type=&#39;text&#39; name="list" value="555"/>
        </form>
        <p class="progress">
            <p class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%;color:red;">
                   <span class="sr-only">10% Complete</span>
           </p>
        </p>
       <p class="files"></p>
       <p class="showimg"></p>     </p>          </p></body><script type="text/javascript">$(function () {
   $("#myupload").ajaxForm({
     dataType:&#39;json&#39;,
     beforeSend:function(){ 
         $(".progress").show();
     },
     uploadProgress:function(event,position,total,percentComplete){
         var percentVal = percentComplete + &#39;%&#39;;
         $(".progress-bar").width(percentComplete + &#39;%&#39;);
         $(".progress-bar").html(percentVal);
         $(".sr-only").html(percentComplete + &#39;%&#39;);
     },
     success:function(data){
         $(".progress").hide();
       
         if(data.error == "empty_name"){
             alert("文件上传非法,上传失败!");
             exit();
         };
         if(data.error == "large"){
             alert("图片上传不能大于2M,上传失败!");
             exit();
         };
   
         if(data.error == "format"){
             alert("图片格式错误,上传失败");
             exit();
         };
   
         //$(".files").html("<b>"+data.name+"("+data.size+"k)</b> <span class=&#39;delimg&#39; rel=&#39;"+data.pic+"&#39;>删除</span>");         $(".files").html("文件名: "+data.name+"<span class=&#39;delimg&#39; rel=&#39;"+data.pic+"&#39;>  del  </span>大小："+data.size);
         var img = "files/"+data.pic;
         $(".showimg").html("<img src=&#39;"+img+"&#39;>");
         alert("上传成功!");
     },
     error:function(){
         alert("上传失败");
     }
       
   });
   $(".progress").hide();
});</script></html>

php upload classe de téléchargement fichier upload.class.php 


<?php
date_default_timezone_set("PRC"); //设置时间区域
//上传类class upload{  protected $file_path = "files"; //当前files存储文件夹
  protected $file_size = 5120000; //5M 用户上传
 /**
  *检测文件是否为空  */
 public function check_file($get_file)
 {    if (empty($get_file))
    {        $type = "check_file";        $arr = array(&#39;error&#39;=>&#39;empty_name&#39;,&#39;type&#39;=>$type);        echo json_encode($arr);        exit();
    }  return true;
 } /**
  *检测文件类型  */
 public function check_type($get_type)
 {   if (( $get_type == ".docx" ) || ( $get_type == ".doc" )) {      //这里只是判断上传word文档可以自己添加
   }else{      $type = "check_type";      $arr = array(&#39;error&#39;=>&#39;format&#39;,&#39;type&#39;=>$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(&#39;error&#39;=>&#39;large&#39;);          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(&#39;YmdHis&#39;) . $rand . $file_type;  $path = $this->file_path."/".$pics;  $result = move_uploaded_file($file_tmp_name, $path);  if($result){    return $pics;
  }else{    return false;    exit();
  }
 }
}?>

ajax soumet le téléchargement du fichier de traitement php


<?phpinclude("upload.class.php");$up_obj = new upload();//获取上传文件名$get_fileName = $_FILES[&#39;mypic&#39;][&#39;name&#39;]; 
$get_fileSize = $_FILES[&#39;mypic&#39;][&#39;size&#39;];$get_TmpFiles = $_FILES[&#39;mypic&#39;][&#39;tmp_name&#39;];$get_fileType = strstr($get_fileName, &#39;.&#39;);$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(            &#39;name&#39; => $get_fileName,
             &#39;pic&#39; => $pics,
             &#39;size&#39;=> $size,
             &#39;error&#39; => 2,
             &#39;list&#39;  =>$_POST[&#39;list&#39;]
         );       if($pics){ //检查文件上传状态
         echo json_encode($arr);
      }   
    }
  }
  
}?>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée d'exemples d'événements EVENT dans Yii2Article suivant：Explication détaillée d'exemples d'événements EVENT dans Yii2

Articles Liés

Voir plus