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

您所在的位置：网站首页 › layui导出设置文件名 › layui 附件上传、预览、删除、下载

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

#layui 附件上传、预览、删除、下载| 来源: 网络整理| 查看: 265

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

一、html

*附件上传  仅支持上传图片、word和pdf文件类型选择文件最多上传五个附件

二、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: function(obj){ if($(fileId).find('.upload-list-item-info').length >= 5){ layer.alert('附件最多只能上传五个'); return false } //预读本地文件示例，不支持ie8 obj.preview(function(index, file, result){ if(file.type.indexOf('image')0){ window.open(initData.data[0].fullPath); } }) }); //删除附件(删除附件元素，前端删除) $(fileId).off('click','.removeFile').on('click','.removeFile',function () { $(this).parents('.upload-list-item-info').remove(); }) } }); } /** * 附件操作 (用于编辑时附件的读取及相关操作) * fileId 预览文件容器id * filesData 附件信息 **/ function operateFiles(fileId, filesData) { $.each(filesData,function (index,value) { var ext = value.fullPath.substr(value.fullPath.lastIndexOf('.')+1); var file = ''; if(ext == 'pdf' || ext == 'PDF'){ file += '' + '' + 'PDF'; }else if(ext == 'doc' || ext=='docx'){ file += '' + '' + 'WORD'; }else if(ext == 'mp4'){ file += '' + '' + '' }else{ file += '' + ' '+ value.sourceName +'

' + '' } $(fileId).append(file); }); $(fileId).off('mouseenter','.upload-list-item-info').on('mouseenter','.upload-list-item-info',function (e) { e.preventDefault(); e.stopPropagation(); $(e.currentTarget).find('img').after('' + '' + ''); $(e.currentTarget).find('.layui-upload-pdf').after('' + '' + ''); }).on('mouseleave','.upload-list-item-info',function (e) { e.stopPropagation(); $(e.currentTarget).find('.actionBox').remove(); }); //预览图片附件 $(fileId).off('click','.viewImg').on('click','.viewImg',function () { var data = []; $(fileId).find('img').each(function (index,value) { data.push({ 'alt':$(this).attr('alt'), //图片名称 'pid':index, 'src':$(this).attr('src'), //图片地址 'thumb':'' //缩略图 }); }); var picJson = { "title": "附件", //相册标题 "id": 1, //相册id "start": 0, //初始显示的图片序号，默认0 "data": data }; layer.photos({ photos: picJson ,anim: 0 ,closeBtn:2 }); }); //预览PDF附件 $(fileId).off('click','.viewPdf').on('click','.viewPdf',function () { var id = $(this).parents('.actionBox').siblings('span').find('a').data('id'); $.post('/system/file/list/fileInfo',{id:id},function (initData) { if(initData.data && initData.data.length>0){ window.open(initData.data[0].fullPath); //文档类附件在浏览器下载预览 } }) }); //预览视频附件 $(fileId).off('click','.layui-upload-drag').on('click','.layui-upload-drag',function () { var id = $(this).data('id'); $.post('/system/file/list/fileInfo',{id:id},function (initData) { if(initData.data && initData.data.length>0){ var html = ''; html += ''; html += ''; html += ''; html += ''; //弹出层 layer.open({ type: 1, skin: 'layui-layer-rim', //加上边框 title: "视频预览", content: html }); } }) }); //删除附件(对已保存的附件进行删除操作) $(fileId).off('click','.removeFile').on('click','.removeFile',function (e) { var $this = $(this); var fileId = $(this).parents('.upload-list-item-info').find('a').data('id'); if(fileId){ $.get('/deleteFile/'+fileId,{},function (initData) { if(initData.code==200){ $this.parents('.upload-list-item-info').remove(); } layer.msg(initData.msg); }) }else{ $this.parents('.upload-list-item-info').remove(); } }) }

2、表格类对多个附件下载操作

{field: '', align:'center', title: '上报凭证',width:100,event:'downFiles',templet:function (d) { var filesList = d.fileMode?d.fileMode:[]; // fileMode为返回附件信息数据 if(filesList.length>0){ var file = ''; $.each(filesList,function (index,value) { file += ''; }); return '下载'+file+'' }else{ return '' } }}, //监听单元格事件 table.on('tool(monitorTable)', function(obj){ var data = obj.data; if(obj.event==='downFiles'){ //由于浏览器同时下载多个附件会触发保护机制，故没隔一秒模拟点击事件下载一个附件 var triggerDelay = 100, removeDelay = 1000; //存放多个下载的url， var url_arr=[]; $.each($(this).find('a'),function (index,ele) { url_arr.push($(ele).attr('href')); }); url_arr.forEach(function(item,index){ _createIFrame(item, index * triggerDelay, removeDelay); }) } }); } // 附件预览、下载 function _createIFrame(url, triggerDelay, removeDelay) { //动态添加iframe，设置src，然后删除 setTimeout(function() { var frame = $(''); frame.attr('src', url); $(document.body).after(frame); setTimeout(function() { frame.remove(); }, removeDelay); }, triggerDelay); }

在这里插入图片描述

【本文地址】

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

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

今日新闻

推荐新闻