jquery.form.js是一个非常强大的用于表单提交的插件。
通过该插件，我们可以非常简单的实现表单的异步提交，并实现文件上传、进度条显示等等。
先放上结果图吧，吊吊大家胃口（动图哦）。
下面贴出代码，注释挺详细的，不再做过多解释了。
前端页面:
<!doctype html>
<head>
<meta charset=utf-8>
<title>File Upload Progress Demo</title>
<style>
body { padding: 30px }
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
</head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="myfile" /><br>
<input type="submit" value="Upload File to Server">
</form>
<div class="progress">
<div class="bar"></div >
<div class="percent">0%</div >
</div>
<div id="status"></div>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="jquery.form.js"></script>
<script>
$(function(){
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
$('form').ajaxForm({
beforeSerialize:function(){
//alert("表单数据序列化前执行的操作！");
//$("#txt2").val("java");//如：改变元素的值
},
beforeSubmit:function(){
//alert("表单提交前的操作");
var filesize = $("input[type='file']")[0].files[0].size/1024/1024;
if(filesize > 50){
alert("文件大小超过限制，最多50M");
return false;
}
//if($("#txt1").val()==""){return false;}//如：验证表单数据是否为空
},
beforeSend: function() {
status.empty();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {//上传的过程
//position 已上传了多少
//total 总大小
//已上传的百分数
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
//console.log(percentVal, position, total);
},
success: function(data) {//成功
var percentVal = '100%';
bar.width(percentVal)
percent.html(percentVal);
alert(data);
},
error:function(err){//失败
alert("表单提交异常！"+err.msg);
},
complete: function(xhr) {//完成
status.html(xhr.responseText);
}
});
});
</script>upload.php
<?php
if (!empty($_FILES['myfile'])) {//判断上传内容是否为空
if ($_FILES['myfile']['error'] > 0) {//判断上传错误信息
echo "上传错误：";
switch ($_FILES['myfile']['error']) {
case 1:
echo "上传文件大小超出配置文件规定值";
break;
case 2:
echo "上传文件大小超出表单中的约定值";
break;
case 3:
echo "上传文件不全";
break;
case 4:
echo "没有上传文件";
break;
}
} else {
list($maintype, $subtype) = explode("/", $_FILES['myfile']['type']);
if (/*$maintype != "image" || $subtype != "png"*/false) {//如果要限制文件格式，就去掉注释
echo "上传文件格式不正确";
} else {
if (!is_dir("./upfile")) {//判断指定目录是否存在
mkdir("./upfile");//创建目录
}
$path = './upfile/' . time() . strtolower(strstr($_FILES['myfile']['name'], "."));//定义上传文件名和存储位置
if (is_uploaded_file($_FILES['myfile']['tmp_name'])) {//判断文件上传是否为HTTP POST上传
if (!move_uploaded_file($_FILES['myfile']['tmp_name'],$path)) {//执行上传操作
echo "上传失败";
} else {
echo "文件:" . time() . strtolower(strstr($_FILES['myfile']['name'], ".")) . "上传成功，大小为：" . $_FILES['myfile']['size'] . "字节";
}
} else {
echo "上传文件：".$_FILES['myfile']['name']."不合法";
}
}
}
}对上面上传代码有疑问的童鞋们可以看我的另外两篇文章，解释的很详细。