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實現文件上傳進度條