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

傷城~ 2022-07-14 14:48 123阅读 0赞

jquery.form.js是一个非常强大的用于表单提交的插件。

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

[Jquery官网下载网址][Jquery]

[github地址+使用文档][github]

[网上参考文档][Link 1]

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

![这里写图片描述][20161213180753691]

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

前端页面:

<!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]  
[PHP 规范化文件上传][PHP 1]

[Jquery]: http://plugins.jquery.com/form/
[github]: https://github.com/malsup/form#type
[Link 1]: http://www.cnblogs.com/heyuquan/p/form-plug-async-submit.html
[20161213180753691]: /images/20220714/eb3167e9a317431eaa091e20bfd8c363.png
[PHP]: http://blog.csdn.net/qq_28602957/article/details/51106366
[PHP 1]: http://blog.csdn.net/qq_28602957/article/details/51145518