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

jquery.form.js是一个非常强大的用于表单提交的插件。
通过该插件，我们可以非常简单的实现表单的异步提交，并实现文件上传、进度条显示等等。
前端页面:
 
 1 <!doctype html>
 2 <head>
 3     <meta charset=utf-8>
 4     <title>File Upload Progress Demo</title>
 5     <style>
 6         body { padding: 30px }
 7         form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
 8 
 9         .progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
10         .bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
11         .percent { position:absolute; display:inline-block; top:3px; left:48%; }
12     </style>
13 </head>
14 <body>
15 <form action="upload.php" method="post" enctype="multipart/form-data">
16     <input type="file" name="myfile" /><br>
17     <input type="submit" value="Upload File to Server">
18 </form>
19 
20 <div class="progress">
21     <div class="bar"></div >
22     <div class="percent">0%</div >
23 </div>
24 
25 <div id="status"></div>
26 
27 <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
28 <script src="jquery.form.js"></script>
29 <script>
30 
31     $(function(){
32         var bar = $('.bar');
33         var percent = $('.percent');
34         var status = $('#status');
35         $('form').ajaxForm({
36             beforeSerialize:function(){
37                 //alert("表单数据序列化前执行的操作！");
38                 //$("#txt2").val("java");//如：改变元素的值
39             },
40             beforeSubmit:function(){
41                 //alert("表单提交前的操作");
42                 var filesize = $("input[type='file']")[0].files[0].size/1024/1024;
43                 if(filesize > 50){
44                     alert("文件大小超过限制，最多50M");
45                     return false;
46                 }
47                 //if($("#txt1").val()==""){return false;}//如：验证表单数据是否为空
48             },
49             beforeSend: function() {
50                 status.empty();
51                 var percentVal = '0%';
52                 bar.width(percentVal)
53                 percent.html(percentVal);
54             },
55             uploadProgress: function(event, position, total, percentComplete) {//上传的过程
56                 //position 已上传了多少
57                 //total 总大小
58                 //已上传的百分数
59                 var percentVal = percentComplete + '%';
60                 bar.width(percentVal)
61                 percent.html(percentVal);
62                 //console.log(percentVal, position, total);
63             },
64             success: function(data) {//成功
65                 var percentVal = '100%';
66                 bar.width(percentVal)
67                 percent.html(percentVal);
68                 alert(data);
69             },
70             error:function(err){//失败
71                 alert("表单提交异常！"+err.msg);
72             },
73             complete: function(xhr) {//完成
74                 status.html(xhr.responseText);
75             }
76         });
77 
78     });
79 
80 </script>

 

 
upload.php
 1 <?php
 2 if (!empty($_FILES['myfile'])) {//判断上传内容是否为空
 3     if ($_FILES['myfile']['error'] > 0) {//判断上传错误信息
 4         echo "上传错误：";
 5         switch ($_FILES['myfile']['error']) {
 6             case 1:
 7                 echo "上传文件大小超出配置文件规定值";
 8                 break;
 9             case 2:
10                 echo "上传文件大小超出表单中的约定值";
11                 break;
12             case 3:
13                 echo "上传文件不全";
14                 break;
15             case 4:
16                 echo "没有上传文件";
17                 break;
18         }
19     } else {
20         list($maintype, $subtype) = explode("/", $_FILES['myfile']['type']);
21         if (/*$maintype != "image" || $subtype != "png"*/false) {//如果要限制文件格式，就去掉注释
22             echo "上传文件格式不正确";
23         } else {
24             if (!is_dir("./upfile")) {//判断指定目录是否存在
25                 mkdir("./upfile");//创建目录
26             }
27             $path = './upfile/' . time() . strtolower(strstr($_FILES['myfile']['name'], "."));//定义上传文件名和存储位置
28             if (is_uploaded_file($_FILES['myfile']['tmp_name'])) {//判断文件上传是否为HTTP POST上传
29                 if (!move_uploaded_file($_FILES['myfile']['tmp_name'],$path)) {//执行上传操作
30                     echo "上传失败";
31                 } else {
32                     echo "文件:" . time() . strtolower(strstr($_FILES['myfile']['name'], ".")) . "上传成功，大小为：" . $_FILES['myfile']['size'] . "字节";
33                 }
34             } else {
35                 echo "上传文件：".$_FILES['myfile']['name']."不合法";
36             }
37         }
38     }
39 }

 

posted @ 2017-11-27 11:34  huohuohiahia  阅读(4009)  评论(0)  编辑  收藏  举报