layui上传多个附件且能删除附件

上传单个附件效果图

上传多个附件效果图

html代码

<!--上传单个附件-->
<tr>
  <td style="text-align: center">附件上传</td>
  <td>
    <div class="layui-form-item">
      <div class="layui-inline">
        <div class="layui-input-block" style="width:800px">
          <input id="question_upload" name="question_upload" type="text" readonly placeholder=""
            autocomplete="off" class="layui-input" hidden>
        </div>
      </div>
      <div class="layui-inline">
        <button id="question_upload" name="question_upload_btn" type="button" class="layui-btn layui-btn-sm layuibtn-radius">
          <i class="layui-icon"></i>上传附件
        </button>
      </div>
    </div>
  </td>
</tr>

<!--上传多个附件-->
<tr>
	<td style="text-align: center">附件上传</td>
	<td>
		<div class="layui-form-item">
			<div class="layui-inline">
				<div class="layui-input-block" style="width:800px">
					<input id="questionFileCode_0" name="questionFileCode" type="text" readonly placeholder="" autocomplete="off" class="layui-input" hidden>
					<input id="questionFileName_0" name="questionFileName" type="text" readonly placeholder="" autocomplete="off" class="layui-input" >
				</div>
			</div>
			<div class="layui-inline">
				<button id="question_upload_0" name="question_upload_btn" type="button" class="layui-btn layui-btn-sm layuibtn-radius">
				<i class="layui-icon"></i>上传附件
				</button>
			</div>
		</div>
	</td>
</tr>

JS代码

/**
*	上传按钮初始化
*	@param id 上传按钮的id
*	@param successCallback 成功回调函数
*	@param ext 限制上传文件的格式	如：xlsx|doc|docx
*	@returns {*}
*/
function uploadInit(id, successCallback, errorCallback, beforeCallback, ext) { 
	var extNew ='xls|xlsx|doc|docx|pdf|jpg|png|gif|bmp|jpeg|ppt|pptx|zip|7z|rar'; 
	if (ext) {
		extNew = ext
	}
	var uploadInst = upload.render({ 
		elem: '#' + id //绑定元素
		, url: '/attachment/upload' //上传接口
		, accept: 'file'//普通文件
		, size: 1024 * 50//最大50M
		, exts: extNew
		, done: successCallback
		, error: errorCallback
		, before: beforeCallback
	});
	return uploadInst;
}



/**
*	上传多个附件
*	@param id 元素id
*	@param ext 限制上传文件的格式	如：xlsx|doc|docx
*	@returns {*}
*/
function initUpload(id, ext) {
	$('#' + id).data("codeList", new Array());
	$('#' + id).data("nameList", new Array());

	//初始化上传按钮
	var inst = uploadInit(id, function (res) { 
		var id1 = "'" + id + "'"
		var fileCode = "'" + res.data[0] + "'" 
		var fileName = "'" + res.data[1] + "'" 
		if (res.code == 200) {
			var  content = '<span style="display: block"><a href=/attachment/downloadOrPreview?fileId=' + res.data[0] + ' style=";width: 400px;">' + res.data[1] + '</a>' + '<i class="layui-icon layui-icon-close" οnclick="delFile(' + id1 + "," + fileCode + "," + fileName + ')"></i></span>'
			$('input[name=' + id + ']').after(content)
			var origincodeList = $('#' + id).data("codeList") 
			var originnameList = $('#' + id).data("nameList")
			origincodeList.push(res.data[0]) 
			originnameList.push(res.data[1]) 
			layer.msg("上传成功")
			return;
		}
		layer.msg("上传失败")
	},
	function () { 
		layer.msg("上传失败")
	}, 
	function (obj) {
	}, ext); 
	return inst;
}

/**
*	上传单个附件
*	@param id 上传按钮id
*	@param formId 表单id
*	@param fileCodeId 上传附件code隐藏域id
*	@param fileNameId 上传附件name显示元素id
*	@param ext 限制上传文件的格式	如：xlsx|doc|docx
*	@returns {*}
*/
function initSimpleUpload(id, formId, fileCodeId, fileNameId, ext) {
	//初始化上传按钮
	var inst = uploadInit(id, function (res) { 
		if (res.code == 200) {
			$('#' + formId + ' #' + fileCodeId).val(res.data[0]);
			$('#' + formId + ' #' + fileNameId).val(res.data[1]); 
			layer.msg("上传成功")
			return;
		}
		layer.msg("上传失败");
	}	
	, function () { 
		layer.msg("上传失败");
	}, function (obj) {
	}, ext);
	return inst;
}

// 删除附件
function delFile(id, fileId, fileName) {  
	var event = window.event || arguments.callee.caller.arguments[0];  									
	$(event.target).parent().remove()  
	var origincodeList = $('#' + id).data("codeList")  
	origincodeList.forEach(function (item, index, arr) {  
		if (item == fileId) {  
			arr.splice(index, 1);  
		}  
	});   
	var originnameList = $('#' + id).data("nameList")  
	originnameList.forEach(function (item, index, arr) {  
		if (item == fileName) {  
			arr.splice(index, 1);  
		}  
	});  
}