layui upload附件上传

1.layui upload 动态生成js

// 附件上传
// elemId:上传button, elemFile:文件存放地址
function fileUpload(elemId,elemFile){var $ = layui.jquery, upload = layui.upload;var allFiles = '';  // 附件存放列表var uploadListIns =  upload.render({elem: elemId,url: '/upload/',multiple: true,accept: "file",choose: function(obj){allFiles = obj.pushFile(); console.log(allFiles)obj.preview(function(index, file, result){file = fileImg($, file);var str = '<a class="file" name="'+index+'" href="javascript:;"  title="'+ file.name +'">\<img class="layui-icon" src="'+ file.icon +'"/>\<p>'+ file.name +'</p>\<img class="layui-a layui-del" src="../images/btn_delete.png"/>\</a>';var fileHtml = $([str].join(''));// 删除fileHtml.find('.layui-del').on('click', function () {delete allFiles[index]; console.log(allFiles)fileHtml.remove();uploadListIns.config.elem.next()[0].value = '';});$(elemId).before(fileHtml);});},allDone: function(obj){ //当文件全部被提交后，才触发if(obj.total > obj.successful){layer.msg("有文件上传失败，暂不更新生产进度，请重试或联系管理员");}else {layer.msg("更新生产进度");}},done: function(res, index, upload){  // 每个文件提交一次触发一次if(res.status == "success"){      // 上传成功return delete allFiles[index];   // 删除文件队列已经上传成功的文件}else{layer.msg(res.message);}this.error(index, upload);},error: function (index, upload) {// typeFile.find('[name="'+index+'"]').remove();// console.log(index+"附件上传失败，请重新上传");}});
}

// 处理结果 附件上传 动态生成html需每次生成页面时即调用
fileUpload('#resultUpload',$("#resultFile"));
// 满意度 附件上传 动态生成html需每次生成页面时即调用
fileUpload('#satisUpload',$("#satisFile"));

2.layui upload 第二次上传无效静态页面

注意：静态页面需要在页面首次加载时就调用upload方法，与其他动态生成附件调用upload的方法不可一起

<div class="layui-files" id="typeFile"><!-- <a class="file" href="javascript:;"><img class="layui-icon" src="../images/files/icon_audio.png"/><p title="附件名称">附件名称</p><img class="layui-a layui-del" src="../images/btn_delete.png"/></a> --><button type="button" class="layui-btn layui_btn_upload" id="typeUpload"></button>
</div>var form, caseedit = null;
layui.use(['jquery','layer','element','form','laydate','upload'], function(exports){var $ = layui.jquery,layer = layui.layer,element = layui.element,laydate = layui.laydate,upload = layui.upload;form = layui.form;caseedit = layui.caseedit;// 案件状态 附件上传 静态页面需首次加载即调用fileUpload('#typeUpload',$("#typeFile"));});

效果图如下所示：

layui upload附件上传相关推荐

upload 附件上传流程（限制附件大小格式）
upload 附件上传流程组件部分: 别忘了定义fileList 我这里就不写data了 <el-uploadclass="upload-demo"action=" ...
layui upload.render上传组件js动态添加html后再次渲染
页面效果页面代码: <input type="hidden" name="mcBaunell" id="m ...
activiti扩展节点属性（在UserTask节点上添加附件上传功能）
给节点添加属性: 1.首先在stencilset.json上模仿其他属性添加新的节点属性的基础配置注意type属性前端根据这个属性值去确认改节点属性在页面上所要表现得形式 {"name ...
layui 附件上传、预览、删除、下载
layui在开发文档中提供了附件上传的方法upload.render(),此篇文章在此模块基础方法上扩展补充了附件预览.删除.下载的实现方法.具体如下: layui 文件/图片上传 layui 相册 ...
ant react 上传_React实战之Ant Design—Upload上传_附件上传
React实战之Ant Design-Upload上传_附件上传 Upload组件大家都在官方文档中看过了,但写的时候还是会遇到许多问题,一些新手看了文档后感觉无从下手,本文过多的简绍就不说了,直接看 ...
后端：Layui实现文件上传功能
今天给大家分享采用AspNet MVC+前端框架LayUi实现文件上传功能,感兴趣的朋友可以学习一下. 文件上传实体(UploadFile.cs) public class UploadFile{pu ...
discuz 删除系统自带的附件上传
由于使用了DBank的论坛附件程序,所以想去掉系统自带的附件上传程序,后台不能设置,研究了下,找到一下方法: 1. template\default\forum\editor_menu_forum. ...
ThinkPHP5整合LayUI编辑器图片上传
2019独角兽企业重金招聘Python工程师标准>>> 一.创建上传方法 public function uploadimg(){$image = $_FILES['file'];$ ...
java多附件上传实例demo
java多附件上传实例demo <%@ page language="java" import="java.util.*" pageEncoding=& ...

layui upload附件上传

layui upload附件上传相关推荐

最新文章

热门文章