layui 附件上传、预览、删除、下载

最新推荐文章于 2025-05-08 19:02:19 发布

心酱儿

最新推荐文章于 2025-05-08 19:02:19 发布

阅读量1.1w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.csdn.net/wbx_wlg/article/details/110120798

layui在开发文档中提供了附件上传的方法upload.render(），此篇文章在此模块基础方法上扩展补充了附件预览、删除、下载的实现方法。具体如下：
layui 文件/图片上传
 layui 相册层

一、html

<div class="layui-form-item">
     <div class="layui-inline">
          <label class="layui-form-label"><span class="font-color-red">*</span>附件上传
              <i class="layui-icon tips">&#xe60b;</i>
              <span class="tipsText"><i></i>仅支持上传图片、word和pdf文件类型</span>
          </label>
          <div class="layui-input-inline" style="width: 900px">
              <button type="button" class="layui-btn layui-btn-sm" id="selectFile">选择文件</button>
              <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                  <div class="layui-upload-list" id="filesArea"></div>
                  <span class="font-color-red fileWarmTips">最多上传五个附件</span>
              </blockquote>
          </div>
      </div>
 </div>

二、CSS

/*附件样式*/
.layui-upload-img {
    width: 100%;
    height: 100%;
    float: left;
}
.upload-list-item-info{
    width: 80px;
    height: 80px;
    margin-right: 8px;
    position: relative;
    display: inline-block;
    border: 1px solid #e6e6e6;
    border-radius: 2px;
    padding: 5px;
}
.layui-upload-list{
    margin: 5px 0 0 0;
}
.layui-elem-quote{
    border: 2px dashed #0087F7;
    border-radius: 5px;
    background: white;
    padding: 5px 15px;
    height: 120px;
}
.upload-list-item-actions{
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 10;
    white-space: nowrap;
    opacity: 1;
    -webkit-transition: .3s;
    transition: .3s;
}
.upload-list-item-card{
    background: transparent;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.upload-list-item-actions svg{
    color: #fff;
    display: inline-block;
    overflow: hidden;
    line-height: 1;
    font-size: 16px;
    width: 16px;
    margin: 0 4px;
    cursor: pointer;
    z-index: 10;
}
.actionBox{
    width: 100%;
    height: 100%;
    background: rgba(127, 127, 127, 0.4);
    position: absolute;
    top: 0;
    left: 0;
}
.tips{
    cursor: pointer;
}
.tipsText{
    position: relative;
    color: #fff;
    font-size: 12px;
    width: 215px;
    display: block;
    padding: 3px;
    background: rgba(0,0,0,.5);
    border-radius: 3px;
    line-height: 22px;
    left: 10px;
    top: -60px;
    z-index: 9;
    text-align: center;
    opacity: 0;
}
.tipsText>i{
    position: absolute;
    width: 0;
    height: 0;
    border-width: 8px 8px 0 8px;
    border-style: solid;
    border-color: #7f7f7f transparent transparent;
    margin-top: 25px;
    margin-left: 75px;
}
.fileWarmTips{
    bottom: 15px;
    position: absolute;
    right: 10px;
    font-size: 12px;
}

三、JS

1、表单类附件上传下载删除操作

layui.use(['layer',  'upload'], function () {
	var upload = layui.upload;
    uploadFiles(upload, '#selectFile','#filesArea','T_TABLE_FILE', $('#IDS').val());//附件操作
})；

  /**
 * 上传组件
 * upload 组件名
 * btnId 操作按钮id
 * fileId 预览文件容器id
 * fieldName 业务表名
 * dataId 业务主键
 * filePurpose 文件类型分类，当一个业务需上传多种类型附件时需添加，单种类型时可传空
 **/
function uploadFiles(upload, btnId, fileId, fieldName, dataId, filePurpose) {
    //多图片上传
    uploadInst = upload.render({
        elem: btnId
        ,url: '/multipartFileUpload' //附件上传服务器接口
        ,data:{fieldName:fieldName,dataId:dataId,filePurpose:filePurpose} //上传接口参数(根据接口实际情况更改)
        ,accept:'video|images' 
        , acceptMime: 'image/*,application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document'
        , exts: 'jpg|png|gif|pdf|PDF|doc|DOC|docx|DOCX'
        // , multiple: true //是否可多选，默认为false
        , number:5  //最大上传个数
        ,size:10240
        ,before: fu