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

最新推荐文章于 2019-08-07 16:29:46 发布

TopMaox

最新推荐文章于 2019-08-07 16:29:46 发布

阅读量428

点赞数

分类专栏： PHP

PHP 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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 规范化文件上传

TopMaox

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【jQuery】Jquery.form.js实现表单异步提交以及文件上传（带进度条）

jquery.form.js是一个非常强大的用于表单提交的插件。通过该插件，我们可以非常简单的实现表单的异步提交，并实现文件上传、进度条显示等等。Jquery官网下载网址github地址+使用文档网上参考文档先放上结果图吧，吊吊大家胃口（动图哦）。下面贴出代码，注释挺详细的，不再做过多解释了。前端页面:
复制链接

扫一扫