您的位置：首页 > Web前端 > JQuery

【jQuery】Jquery.form.js实现表单异步提交以及文件上传（带进度条）

2016-12-13 19:48 981 查看
jquery.form.js是一个非常强大的用于表单提交的插件。

通过该插件，我们可以非常简单的实现表单的异步提交，并实现文件上传、进度条显示等等。

Jquery官网下载网址

github地址+使用文档

网上参考文档

先放上结果图吧，吊吊大家胃口（动图哦）。



下面贴出代码，注释挺详细的，不再做过多解释了。

前端页面:

<!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']."不合法";
}
}
}
}


对上面上传代码有疑问的童鞋们可以看我的另外两篇文章，解释的很详细。

PHP 文件上传

PHP 规范化文件上传
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery 异步 表单 进度条 文件上传
相关文章推荐
新的分享
章节导航