layui-col-md-offset1 第二次上傳無法上傳

layui-col-md-offset1 第一次上傳文件正常,第二次上傳文件,沒有觸發調用接口的問題

開始的時候,使用的是動態生成的,的 html 頁面,這樣在第一上傳的時候是沒有問題,但是將頁面關閉後,第二次上傳的時候,會導致能夠正常的選擇文件,但是無法進行接口和方法的觸發,導致文件無法上傳到服務器。 

 

html 代碼

<div id="xiaoming" style="disply: none">
    <div class="layui-upload-drag layui-col-md-offset1 div11" id="shangchuan">
        <div style="margin-top: 15%">
              <i class="layui-icon">$#xe67c;</i>
              <p>點擊上傳,或將文件拖拽到此處</p>
        </div>
    </div>
</div>

js 代碼

var index1 = layer.open({
    type: 1,
    titile: '文件上傳',
    content: ${'#xiaoming'},
    area: ['50%', '70%'],
    closeBtn: 1,
    btn: ['關閉'],
    btnAlign: 'c',
    yes: function () {
        layer.close(index1);
    },
    success: function () {
        uploadFile(currentRow);
    }
});
 function uploadFile(currentRow) {
    //
     upload.render({
         elem: '#shangchuan',
         url: '/*/*/*',
         data: {"id": currentRow.id},
         accept: ['file'],
         exts: 'pdf',
         before: function () {
             layer.load();
             console.log(currentRow.id);
         },
         done: function (res) {
             
         },
         error: function (XMLHttpRequest) {
             layer.alert("錯誤提示:" + XMLHttpRequest.status + ":" + XMLHttpRequest.responseText, {iicon: 0});
             layer.closeAll('loading');
         }
     });
}

解決方式:

中間嘗試了很多的方法,有的方法是可以在窗口關閉後再次的上傳,但是在批量導入的時候上傳窗口出來後無法瀏覽文件。

引入了額外的 upload.js 文件,修改源碼,等方式都沒有解決。

將上傳框內容註釋掉

<div id="xiaoming" style="disply: none">
    <!--<div class="layui-upload-drag layui-col-md-offset1 div11" id="shangchuan">
        <div style="margin-top: 15%">
              <i class="layui-icon">$#xe67c;</i>
              <p>點擊上傳,或將文件拖拽到此處</p>
        </div>
    </div>-->
</div>

js代碼( 上傳框的內容引入到 js 代碼中,然後執行 upload.render(),再次進行長傳框的引入 )

var html = '<div class="layui-upload-drag layui-col-md-offset1 div11" id="shangchuan">\n' +
    '        <div style="margin-top: 15%">\n' +
    '              <i class="layui-icon">$#xe67c;</i>\n' +
    '              <p>點擊上傳,或將文件拖拽到此處</p>\n' +
    '        </div>\n' +
    '    </div>';
upload.render();
var index1 = layer.open({
    type: 1,
    titile: '文件上傳',
    content: ${'#xiaoming'},
    area: ['50%', '70%'],
    closeBtn: 1,
    btn: ['關閉'],
    btnAlign: 'c',
    yes: function () {
        layer.close(index1);
    },
    success: function () {
        uploadFile(currentRow);
    }
});
 function uploadFile(currentRow) {
    //
     upload.render({
         elem: '#shangchuan',
         url: '/*/*/*',
         data: {"id": currentRow.id},
         accept: ['file'],
         exts: 'pdf',
         before: function () {
             layer.load();
             console.log(currentRow.id);
         },
         done: function (res) {

         },
         error: function (XMLHttpRequest) {
             layer.alert("錯誤提示:" + XMLHttpRequest.status + ":" + XMLHttpRequest.responseText, {iicon: 0});
             layer.closeAll('loading');
         }
     });
}

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章