layui 上傳檔案——批量匯入資料UI
阿新 • • 發佈:2019-01-26
使用layui的檔案上傳元件,可以方便的彈出檔案上傳介面。
效果如下:
點選【批量匯入】按鈕呼叫js指令碼importData(config)就可以實現資料上傳到伺服器。
指令碼:
/*** * 批量匯入 * config.downUrl 下載模板url * config.uploadUrl 上傳檔案url * config.msg * config.done 上傳結束後執行。 */ function importData(config){ var default_config = { msg:"資料匯入成功!" } $.extend( default_config, config); var idRandom = "importData" + Math.ceil(Math.random()*10000) var htmlContent = '<div class="layui-upload-drag" id="'+idRandom+'">'; htmlContent += '<i class="layui-icon"></i>'; htmlContent += '<p>點選上傳,或將檔案拖拽到此處</p>'; htmlContent += '</div>'; layer.open({ type: 1 ,offset: "auto" //具體配置參考:http://www.layui.com/doc/modules/layer.html#offset ,id: 'layer_importData' //防止重複彈出 ,title:'匯入記錄' ,content: htmlContent ,maxWidth:800 ,btn: ['下載模板'] ,btnAlign: 'c' //按鈕居中 ,shade: 0 //不顯示遮罩 ,yes: function(){//提交 var iframe = $("<iframe></iframe>"); iframe.attr("src",default_config.downUrl); iframe.css("display","none"); $("#"+idRandom).append(iframe); } }); form.render(); //拖拽上傳 upload.render({ elem: "#"+idRandom ,url: default_config.uploadUrl ,accept: 'file' ,done: function(data){ if(data.code == 0){ layer.closeAll(); if($("#query")){ $("#query").click(); } if(default_config.done){ default_config.done(data); }else{ layer.msg(default_config.msg); } }else{ layer.msg(data.msg); } } }); }