cari
Rumahpembangunan bahagian belakangtutorial phpphp和ajaxForm如何实现异步带进度条上传文件的实例

在使用ajaxForm方法之前,首先需要安装form.js的插件,网上有;

一、首先说用法,ajaxForm可以接收0或1个参数,该参数可以是一个变量、一个对象或回调函数,这个对象主要有以下参数:

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

htmlcode


<!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.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提交php处理文件upload.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);
      }   
    }
  }
  
}?>

Atas ialah kandungan terperinci php和ajaxForm如何实现异步带进度条上传文件的实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
php怎么把负数转为正整数php怎么把负数转为正整数Apr 19, 2022 pm 08:59 PM

php把负数转为正整数的方法:1、使用abs()函数将负数转为正数,使用intval()函数对正数取整,转为正整数,语法“intval(abs($number))”;2、利用“~”位运算符将负数取反加一,语法“~$number + 1”。

php怎么实现几秒后执行一个函数php怎么实现几秒后执行一个函数Apr 24, 2022 pm 01:12 PM

实现方法:1、使用“sleep(延迟秒数)”语句,可延迟执行函数若干秒;2、使用“time_nanosleep(延迟秒数,延迟纳秒数)”语句,可延迟执行函数若干秒和纳秒;3、使用“time_sleep_until(time()+7)”语句。

php字符串有没有下标php字符串有没有下标Apr 24, 2022 am 11:49 AM

php字符串有下标。在PHP中,下标不仅可以应用于数组和对象,还可应用于字符串,利用字符串的下标和中括号“[]”可以访问指定索引位置的字符,并对该字符进行读写,语法“字符串名[下标值]”;字符串的下标值(索引值)只能是整数类型,起始值为0。

php怎么除以100保留两位小数php怎么除以100保留两位小数Apr 22, 2022 pm 06:23 PM

php除以100保留两位小数的方法:1、利用“/”运算符进行除法运算,语法“数值 / 100”;2、使用“number_format(除法结果, 2)”或“sprintf("%.2f",除法结果)”语句进行四舍五入的处理值,并保留两位小数。

php怎么读取字符串后几个字符php怎么读取字符串后几个字符Apr 22, 2022 pm 08:31 PM

在php中,可以使用substr()函数来读取字符串后几个字符,只需要将该函数的第二个参数设置为负值,第三个参数省略即可;语法为“substr(字符串,-n)”,表示读取从字符串结尾处向前数第n个字符开始,直到字符串结尾的全部字符。

php怎么根据年月日判断是一年的第几天php怎么根据年月日判断是一年的第几天Apr 22, 2022 pm 05:02 PM

判断方法:1、使用“strtotime("年-月-日")”语句将给定的年月日转换为时间戳格式;2、用“date("z",时间戳)+1”语句计算指定时间戳是一年的第几天。date()返回的天数是从0开始计算的,因此真实天数需要在此基础上加1。

php怎么替换nbsp空格符php怎么替换nbsp空格符Apr 24, 2022 pm 02:55 PM

方法:1、用“str_replace("&nbsp;","其他字符",$str)”语句,可将nbsp符替换为其他字符;2、用“preg_replace("/(\s|\&nbsp\;||\xc2\xa0)/","其他字符",$str)”语句。

php怎么查找字符串是第几位php怎么查找字符串是第几位Apr 22, 2022 pm 06:48 PM

查找方法:1、用strpos(),语法“strpos("字符串值","查找子串")+1”;2、用stripos(),语法“strpos("字符串值","查找子串")+1”。因为字符串是从0开始计数的,因此两个函数获取的位置需要进行加1处理。

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

VSCode Windows 64-bit Muat Turun

VSCode Windows 64-bit Muat Turun

Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft

Versi Mac WebStorm

Versi Mac WebStorm

Alat pembangunan JavaScript yang berguna

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

SecLists

SecLists

SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.

Muat turun versi mac editor Atom

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular