个人小结---LayUI上传单文件

最新推荐文章于 2021-03-25 07:13:31 发布

原创最新推荐文章于 2021-03-25 07:13:31 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #LayUI #单文件上传

个人小结专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了如何在layui框架中优化文件上传组件，避免重复实例化导致的问题，如文件上传无响应、无法触发框架响应等。通过限制上传按钮的实例化次数，并提供具体的HTML结构与JS代码实现，确保上传功能稳定可靠。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

按钮所在的层不应是form，按钮不能多次实例化，以下每次都会打开一个新窗口，此处加上限制，render只实例化一次（如果多次示例，会出现文件上传没反应，无法触发layui响应，无法上传到后台）。

以下是Html（在本人的项目中，以下的最外层div要多次弹框使用。layui.open打开该div，使用的layui的版本是2.0.2）：

<div id="form" class="layui-upload" hidden="hidden">
    文件名： <input type="text"
                style="width: 450px;height: 25px"/>
    <div class="layui-btn-group">
        <button style="margin-bottom:10px" class="layui-btn layui-btn-small"
                title="新建" >新建</button>
        <button style="float:right;margin-bottom:10px" class="layui-btn layui-btn-small"
                id="file-upload-btn" title="从文件导入">导入</button>
    </div>
    <div class="lineDiv">
        <table class="layui-table" lay-filter=L-table">
            <thead>
            <tr>
                <th field="name" width="40%">键</th>
                <th field="name" width="40%">值</th>
                <th field="name" width="20%">操作</th>
            </tr>
            </thead>
            <tbody id="paramFile-table">
            </tbody>
        </table>
    </div>
</div>

以下是JS:

var uploadFileBtnInstEdit;//上传文件按钮（编辑）
var uploadFileBtnInst;//上传文件按钮（新建）

layui.use('upload', function(){
    if (formType == '-edit' && typeof (uploadFileBtnInstEdit) == 'undefined'){
        uploadFileBtnInstEdit = initUploadFileBtnInst(formType);
    }else if(formType == '' && typeof (uploadFileBtnInst) == 'undefined' ) {
      uploadFileBtnInst = initUploadFileBtnInst(formType);
    }
});

/**
* 初始化上传按钮（只初始化一次）
* @param formType
*/
function initUploadFileBtnInst(formType){
    var upload = layui.upload;
    var tempUploadFileBtnInst = upload.render({
        elem: '#file-upload-btn'+formType //绑定按钮元素
        ,url: '/uploadParamFile' //上传接口
        ,auto:true
        ,accept: 'file'
        ,multiple: false
        ,method:'post'
        ,size:5000 //此处设为最大50M
        ,field: 'file'//对应后台的@RequestParam("file"),可修改
        ,drag :false
        ,before: function(obj){
            layer.load(); //上传loading
        }
        ,done: function(res){
            //上传完毕回调
            layer.closeAll('loading'); //关闭loading
        }
        ,error: function(){
            //请求异常回调
            layer.msg('未知错误', {
                time: 5000, //5s后自动关闭
                btn: ['确定']
            });
            layer.closeAll('loading'); //关闭loading
        }
    });
    return tempUploadFileBtnInst;
}

以下是后台代码：

@PostMapping("/uploadParamFile")
@ResponseBody
public Map<String, Object> uploadParamFile(@RequestParam("file") MultipartFile file) {
//log.info("开始解析");
Map<String, Object> result = new HashMap<String, Object>();

return result;

}