layui实现文件上传+进度条+form表单中设置默认值

本文转载自查看原文 2020-05-10 12:58 822 前端

form表单中设置默认值

进度条显示在弹出框渲染

layui包upload.js中需要修改的，同最下面的一样
代码html中js部分：
layui.use(["upload", "jquery", "table", "element","layer"], function () {
        var upload = layui.upload;
        var element = layui.element;
        var layer  = layui.layer ;
        element.init();
        var $ = layui.jquery;
        var table = layui.table;

        var xhrOnProgress = function (fun) {
            xhrOnProgress.onprogress = fun; //绑定监听
            //使用闭包实现监听绑
            return function () {
                //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
                var xhr = $.ajaxSettings.xhr();
                //判断监听函数是否为函数
                if (typeof xhrOnProgress.onprogress !== 'function')
                    return xhr;
                //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
                if (xhrOnProgress.onprogress && xhr.upload) {
                    xhr.upload.onprogress = xhrOnProgress.onprogress;
                }
                return xhr;
            }
        };


        //服务器信息上传实例
        upload.render({
            elem: '#selhost_data', //指定元素
            url: "/upload/hostdata/?user_action=服务器信息上传",
            accept: "file",
            exts: 'xls|xlsx|csv',
            auto: false,
            field: "aimfile",
            bindAction: "#uphost_data",
            xhr: xhrOnProgress,
            progress: function(percent) {
                    element.progress('progressBar',percent  + '%');
                },
            choose: function(obj) {

            },
            before:function(){
                layer.open({
                  type: 1,
                  title: '加载进度',
                  maxWidth:800,
                  content: '<div style="height: 20px;width: 800px;" class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="progressBar">\n' +
                      '\t\t\t<div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>\n' +
                      '\t\t</div>'
                  {#content: '<div style="height: 20px;width: 800px;">\n' +#}
                  {#    '                \t<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="progressBar">\n' +#}
                  {#    '\t\t\t<div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>\n' +#}
                  {#    '\t\t</div>\n' +#}
                  {#    '            </div>'#}

});
            },
            {#before:function(){layer.load()},#}
            done: function(res) {
                layer.msg(res.msg);
                layer.closeAll("loading");
                layer.closeAll();
            },
            error: function(res) {
                element.progress('progressBar', '0%');
                layer.msg(res.msg);
                layer.closeAll("loading");
                layer.closeAll();
            },

            data: {
                workindex: function () {
                    return $("#workindex").val();
                }
            },

           {# done: function (res) {#}
           {##}
           {#     if (res.code === 500) {#}
           {#         return layer.open({#}
           {#             title: res.msg,#}
           {#         })#}
           {#     }#}
           {#     if (res.code === 200) {#}
           {#         return layer.msg(res.msg)#}
           {#     }#}
           {##}
           //{#},#}

        });

弹出框显示进度条

感觉还不太完美，有时间会继续优化

进度条显示在页面端渲染

1.修改layui----upload.js的源码

ctr+f搜索ajax，在此处

xhr:function () {
    var newXhr = i.ajaxSettings.xhr();
    // 给xhr的upload添加progress的监听
    newXhr.upload.addEventListener('progress' , function (e) {
        var percent = Math.floor(e.loaded / e.total * 100); //计算出进度
        typeof l.progress === 'function' && l.progress(e , percent); // 传递给upload的progress回调
    });
    return newXhr;
},

2，在页面代码中添加

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title>文件上传进度条</title>
        <script src="../static/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
        <script src="../static/layui.all.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" type="text/css" href="../static/css/layui.css" />
    </head>
 
    <body>
        <button type="button" class="layui-btn" id="chooseFile">
              <i class="layui-icon">&#xe67c;</i>选择文件
        </button> 文件名称: <span id="fileName"></span>
        <div style="height: 20px;"></div>
        <button type="button" class="layui-btn" id="uploadBtn">
              <i class="layui-icon">&#xe67c;</i>上传文件
        </button>
        <div style="height: 20px;"></div>
        <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="progressBar">
            <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
        </div>
        <script type="text/javascript">
            var upload = layui.upload,
                element = layui.element;
            element.init();
            
            
            upload.render({
                elem: '#chooseFile', // 文件选择
                accept:'file',
                url: '/fileUpload',
                auto: false, // 设置不自动提交
                bindAction: '#uploadBtn', // 提交按钮



                progress: function(e , percent) {
                    console.log("进度：" + percent + '%');
                    element.progress('progressBar',percent  + '%');
                },
                choose: function(obj) {
                    obj.preview(function(index, file, result) {
                        $("#fileName").html(file.name);
                    });
                },
                done: function(res) {
                    layer.msg(res.msg);
                },
                error: function(res) {
                    layer.msg(res.msg);
                }
            });
        </script>
    </body>
</html>

<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="progressBar">
            <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
        </div>

3.js部分代码

<script type="text/javascript">
            var upload = layui.upload,
                element = layui.element;
            element.init();
            
            
            upload.render({
                elem: '#chooseFile', // 文件选择
                accept:'file',
                url: '/fileUpload',
                auto: false, // 设置不自动提交
                bindAction: '#uploadBtn', // 提交按钮
                progress: function(e , percent) {
                    console.log("进度：" + percent + '%');
                    element.progress('progressBar',percent  + '%');
                },
                choose: function(obj) {
                    obj.preview(function(index, file, result) {
                        $("#fileName").html(file.name);
                    });
                },
                done: function(res) {
                    layer.msg(res.msg);
                },
                error: function(res) {
                    layer.msg(res.msg);
                }
            });
        </script>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 Jquery.form.js实现表单异步提交以及文件上传（带进度条） layui文件上传进度条（模拟） layui上传文件配合进度条 layui 文件上传加进度条 Layui多文件上传进度条【antd】form表单默认值设置 XMLHttpRequest上传文件实现进度条 Spring 实现文件上传的进度条简单的实现上传文件进度条 php实现文件上传进度条