Layui如何使用上傳進度？無需任何修改，幾行代碼即可實現上傳進度條！

Layui如何使用上傳進度？

無需任何修改，幾行代碼即可實現上傳進度條！

直接上代碼

<!--彈出進度條-->
<div id="uploadLoadingDiv" style="display:none;">
	<div class="layui-progress" lay-showpercent="true" lay-filter="js_upload_progress" style="margin: 30px;">
	    <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
	    </div>
	<div class="layui-form-item" style="text-align: center">
	<button class="layui-btn layui-btn-normal js_upload_progress_bar_sure" onclick="layer.close(layui.index)" >確定</button>
	</div>
</div>

layui.use(['element', 'upload'], function () {
        var upload = layui.upload,
        element = layui.element,$=layui.$;
        element.init();
       
      //創建監聽函數
        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: '#js_upload',
            url: gContextPath+"/uploadfile2.htm"
            ,multiple: false
            ,before:function(){
                element.progress('js_upload_progress', '0%');//設置頁面進度條
                    var tindex = layer.open({
                        type: 1,
                        title: '上傳進度',
                        closeBtn: 1, //不顯示關閉按鈕
                        area: ['300px', '170px'],
                        shadeClose: false, //開啓遮罩關閉
                        content: $("#uploadLoadingDiv").html(),
                        offset: '100px'
                    });
                   //關閉進度條提示
                    $(document).on('click','.js_upload_progress_bar_sure',function(){
                        layer.close(tindex );
                     });
        
            }
            ,xhr:xhrOnProgress
            ,progress:function(value){//上傳進度回調 value進度值
                element.progress('js_upload_progress', value+'%');//設置頁面進度條
            }
            ,field: 'file'
            , accept: 'images'
            , data: {
                "index": 1,
                "appCbnid":""
            },
            accept: 'file',
            //普通文件
            done: function (res) {
                console.log(res);
                $(".js_upload_file_name").val(res[0].data.filename);
                $(".js_resource_invite_file_id").val(res[0].data.fid);
            },
            error: function () {
                layer.alert("上傳失敗",{offset: '100px'});
                return false;
            }

        });

 

        
    });