在使用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='myupload' action='upload.php' method='post' enctype='multipart/form-data'>
<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='text' 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:'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();
};
if(data.error == "format"){
alert("图片格式错误,上传失败");
exit();
};
//$(".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 = "files/"+data.pic;
$(".showimg").html("<img src='"+img+"'>");
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('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" )) { //这里只是判断上传word文档可以自己添加
}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();
}
}
}?>ajax提交php处理文件upload.php
<?phpinclude("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,
'list' =>$_POST['list']
); 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!
E-mel PHP: Panduan Penghantaran Langkah demi LangkahMay 09, 2025 am 12:14 AMPhpisusedforsendingemailsduetoitsintegrationWithservermailservicesandexternalsmtpproviders, automatingnotificationsandmarketingcampaigns.1) Setupyourphpenvironmentwithawebserverandphp, Memastikan
Cara Menghantar E -mel melalui PHP: Contoh & KodMay 09, 2025 am 12:13 AMCara terbaik untuk menghantar e -mel ialah menggunakan perpustakaan phpmailer. 1) Menggunakan fungsi mel () adalah mudah tetapi tidak boleh dipercayai, yang boleh menyebabkan e -mel memasuki spam atau tidak dapat dihantar. 2) PHPMailer menyediakan kawalan dan kebolehpercayaan yang lebih baik, dan menyokong surat HTML, lampiran dan pengesahan SMTP. 3) Pastikan tetapan SMTP dikonfigurasi dengan betul dan penyulitan (seperti startTLS atau SSL/TLS) digunakan untuk meningkatkan keselamatan. 4) Untuk sejumlah besar e -mel, pertimbangkan untuk menggunakan sistem giliran mel untuk mengoptimumkan prestasi.
E -mel PHP Lanjutan: Headers & Ciri -ciri KustomMay 09, 2025 am 12:13 AMCustomheadersandadvancedfeaturesInphpeMailenhanceFunctialityandreliability.1) customHeadersAddmetadataFortrackingandCategorization.2) htmlemailsallowformattingIntivity.3)
Panduan untuk menghantar e -mel dengan PHP & SMTPMay 09, 2025 am 12:06 AMMenghantar mel menggunakan PHP dan SMTP boleh dicapai melalui Perpustakaan PHPMailer. 1) Pasang dan konfigurasikan PHPMailer, 2) Tetapkan butiran pelayan SMTP, 3) Tentukan kandungan e -mel, 4) Hantar e -mel dan mengendalikan kesilapan. Gunakan kaedah ini untuk memastikan kebolehpercayaan dan keselamatan e -mel.
Apakah kaedah terbaik untuk menghantar e -mel menggunakan php?May 08, 2025 am 12:21 AMThebestapproachforsendingemailsinphpisusingthephpmaillibraryduetoitsreliability, featureRichness, andeaseofuse.phpmailersupportssmtp, proveddetaileDerrorHandling, membolehkanSendsendingHtmlandPlainteMails, supportsattachments, danStoVeShanCess
Amalan terbaik untuk suntikan ketergantungan dalam phpMay 08, 2025 am 12:21 AMAlasan untuk menggunakan suntikan ketergantungan (DI) ialah ia menggalakkan gandingan longgar, kebolehlihatan, dan pemeliharaan kod. 1) Gunakan pembina untuk menyuntik kebergantungan, 2) Elakkan menggunakan pencari perkhidmatan, 3) Gunakan bekas suntikan ketergantungan untuk menguruskan kebergantungan, 4) meningkatkan kesesuaian melalui suntikan suntikan, 5) Elakkan kebergantungan over-suntikan, 6) Pertimbangkan kesan DI terhadap prestasi.
Petua Penalaan Prestasi PHPMay 08, 2025 am 12:20 AMPhpperformancetuningiscrucialbecauseitenhancesspeedandeficiency, whoarevitalforwebapplications.1) cachingwithapcureSdatabaseloadandimprovesresponsetimes.2)
Keselamatan e -mel PHP: Amalan terbaik untuk menghantar e -melMay 08, 2025 am 12:16 AMTthebestpracticesforDailssecureeleynpinceDudududude: 1) usingSecureConfigurationsatiationswithsmtpandStartTartTlSencrryption, 2) vactrentatiatingIsTitionputStopReventInJectaCtAtactaSs, 3) engrypTyptingSensensitiVIdAdAlsHAlSiSsSenSsensSl ,SsengsSenSsensSl ,SsengSiSsSSSsSsSsSsSsSsSsSsSsSsSsSsSsSsSsSsSsSsSsSssSsSsSsSsSsSsSsSsSsSsSsSsSsSsSsSSSSsSSSSSSSSSHAsSsSSSSSHAsSsSengs.)
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
SublimeText3 versi Inggeris
Disyorkan: Versi Win, menyokong gesaan kod!
SublimeText3 Linux versi baharu
SublimeText3 Linux versi terkini
Penyesuai Pelayan SAP NetWeaver untuk Eclipse
Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.
