bootstrap文件上传组件bootstrap-filestyle

最新推荐文章于 2024-07-03 15:25:11 发布

arsenalzjx

最新推荐文章于 2024-07-03 15:25:11 发布

阅读量1.8k

点赞数

分类专栏： js组件 bootstrap 前端文章标签： bootstrap上传组件 bootstrap-filestyle 多文件上传 ajax文件上传

本文链接：https://blog.csdn.net/Arsenalzjx/article/details/82382502

版权

前端同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

js组件

2 篇文章 0 订阅

订阅专栏

bootstrap

2 篇文章 0 订阅

订阅专栏

源码地址:

https://github.com/markusslima/bootstrap-filestyle

文档地址:

http://markusslima.github.io/bootstrap-filestyle/

bootstrap-filestyle是个精简实用的文件上传组件,功能比较纯粹, 使用方法相对简单

效果图:

引入资源,注意顺序

<head>
    <link href="/asserts/bootstrap3.3.7/css/bootstrap.css" rel="stylesheet">
    <script src="/asserts/jquery.3.3.1/jquery-3.3.1.js"></script>
    <script src="/asserts/bootstrap3.3.7/js/bootstrap.js"></script>
    <script src="/asserts/bootstrap-filestyle-1.2.3/bootstrap-filestyle.js"></script>
</head>

html-body

<body>
    <form id="submit_form" class="form-inline">
        <div class="form-group" style="font-size: 20px">
            <!--通过multiple属性进行多选和单选控制-->
            上传:<input type="file" name="files" id="files" class="form-control" multiple>
        </div>
    </form>
    <button onclick="fileSubmit()">提交</button>

<!--等待动画模态框-->
<div class="modal fade" id="wait_modal">
    <div class="modal-dialog modal-sm">

        <img alt=""
             src="https://img-blog.csdnimg.cn/2022010616080376590.gif"/>

    </div><!-- /.modal-dialog -->
</div><!--等待动画模态框-->
</body>

<footer>
    <script>
        var file_param = {
            buttonText: "浏览",                                       //按钮名称
            buttonName: "btn-primary",                                //按钮风格
            //size: "lg",                                             //按钮尺寸
            iconName: "glyphicon glyphicon-inbox",                    //按钮图标
            disabled: false,                                           //按钮是否禁止选择
            buttonBefore: true,                                       //按钮在输入框前
            input: false,                                             //是否显示输入框
            placeholder: "请选择文件",                                  //输入框默认占位符
            //当input为true时,标记计数器无效
            badge: true                                             //启用或禁用标记计数器
        };

        //初始化上传按钮
        $(":file").filestyle(file_param);

        //全局单文件大小限制
        var global_single_file_size = 1024 * 1024;
        //全局总文件大小限制
        var global_total_file_size = 1024 * 1024 * 10;
        //全局最大文件上传数量
        var global_file_total_num = 5;

        //验证上传文件大小,数量限制
        function validateFile() {
            var vali_size = true;
            var total_size = 0;
            var length = $("#files").prop('files').length;
            //允许不上传文件,如果不允许这部直接return false
            if (length == 0) {
                return true;
            }
            if (length > global_file_total_num) {
                alert("文件数量超过限制");
                return false;
            }

            for (var i = 0; i < length; i++) {
                var size = $("#files").prop('files')[i].size;
                if (size > global_single_file_size) {
                    alert("单文件超过大小限制");
                    vali_size = false;
                    break;
                } else {
                    total_size += size;
                }
            }
            if (!vali_size) {
                return false;
            } else if (total_size > global_total_file_size) {
                alert("总文件超过大小限制");
                return false;
            }
            return true;
        }
        
        //提交操作
        function fileSubmit() {
            var form = $('#submit_form')[0];
            //使用formData提交表单
            var formData = new FormData(form);

            $.ajax({
                type: "POST",
                url: "/url",
                data: formData,
                async: true,
                cache: false,
                contentType: false,
                processData: false,
                //提交前打开等待动画
                beforeSend: function () {
                    //如在模态框中提交,需先关闭当前模态框,再打开模态框
                    $("#wait_modal").modal({backdrop: 'static', keyboard: false});
                },

                success: function (data) {
                    alert('操作成功');
                    window.location.href = "xxxurl"
                },
                //完成操作后隐藏等待动画
                complete: function () {
                    $("#wait_modal").modal('hide');
                },
                error: function () {
                    alert("出现错误");
                }
            });
        }
    </script>
</footer>

arsenalzjx

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
bootstrap文件上传组件bootstrap-filestyle

源码地址:https://github.com/markusslima/bootstrap-filestyle文档地址:http://markusslima.github.io/bootstrap-filestyle/bootstrap-filestyle是个精简实用的文件上传组件,功能比较纯粹, 使用方法相对简单效果图: 引入资源,注意顺序&lt;h...
复制链接

扫一扫

专栏目录