layui上传，选择与上传分开，非自动上传

你的名字 2024-04-17 14:00 72阅读 0赞

上传附件，将选择与上传分开，图片则显示缩略图。表单验证通过后才上传。

1、选择按钮使用input标签，解决点击后验证表单问题。

2、增加隐藏按钮与upload.render绑定。在表单验证通过后，使用模拟点击上传$('').trigger('click');

3、修改时，如果只修改了表单内容，则附件不重复上传，如果修改了附件则上传。监听选择文件的回调函数。

## Html代码 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title></title>
    		<link rel="stylesheet" type="text/css" href="../../../../../css/validform/style.css" media="all" />
    		<link rel="stylesheet" type="text/css" href="../../../../../layui/css/layui.css" media="all" />
    		<link rel="stylesheet" type="text/css" href="../../../../../css/modules/comm.css" media="all">
    		<style type="text/css">
    			html,body{
    				height: auto;
    			}
    			.layui-input-block {
    				margin-right: 20px;
    			}
    
    			.layui-input,
    			.layui-select,
    			.layui-textarea {
    				height: 38px;
    			}
    
    			.layui-form-pane .layui-input-block,
    			.layui-form-pane .layui-input-inline,
    			layui-form-pane .layui-form-label {
    				margin-bottom: 12px;
    			}
    		</style>
    	</head>
    
    	<body>
    		<form class="layui-form layui-container layui-form-pane" id="datumForm">
    			<fieldset class="layui-elem-field layui-field-title">
    				<legend>资料信息</legend>
    			</fieldset>
    			<div class="layui-form-item">
    				<input name="id" type="hidden" v-model="id">
    				<input name="pic_id" type="hidden" v-model="pic_id">
    				<input name="org_id" type="hidden" v-model="org_id">
    				<input name="sub_cid" type="hidden" v-model="sub_cid">
    				<input name="device_id" type="hidden" v-model="device_id">
    			</div>
    			<div class="layui-form-item">
    				<div class="layui-inline">
    					<label class="layui-form-label">资料类型:</label>
    					<div class="layui-input-inline layui-form" lay-filter="datumFilter">
    						<select name="type" datatype="*" id="datum_type" lay-filter="datumTypeFilter" lay-search></select>
    					</div>
    				</div>
    				<div class="layui-inline">
    					<label class="layui-form-label">资料名称:</label>
    					<div class="layui-input-inline">
    						<input id="datumName" type="text" name="name" datatype="*" class="layui-input" v-model="name">
    					</div>
    				</div>
    				<div class="layui-inline">
    					<div class="layui-input-inline">
    						<input type="button" class="layui-btn layui-btn-normal layui-btn-radius" value="选择" id="selectDatum"/>
    					</div>
    				</div>
    			</div>
    			<div class="layui-form-item layui-form-text" style="height: 100%; padding: 10px 0;">
    				<label class="layui-form-label ">资料描述</label>
    				<div class="layui-input-block" style="height: calc(100% - 38px - 20px - 5px);">
    					<textarea class="layui-textarea" style="height:100%;" name="remark" v-model="remark"></textarea>
    				</div>
    			</div>
    			<div class="layui-form-item" v-show="picIsShow">
    				 <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
    				    预览图：
    				    <div class="layui-upload-list" id="datumPic"></div>
    				 </blockquote>
    				
    			</div>
    			<div class="layui-form-item">
    				<div class="layui-col-md4 layui-col-md-offset4">
    					<div class="layui-input-block button-item">
    						<button class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
    						<button class="layui-btn" id="uploadDatum" style="display: none;">上传</button>
    						<button id="cancel" class="layui-btn layui-btn-primary">取消</button>
    					</div>
    				</div>
    			</div>
    		</form>
    		<script src="../../../../../js/lib/jquery/jquery.min.js"></script>
    		<script src="../../../../../layui/layui.js"></script>
    		<script src="../../../../../js/lib/vue/vue.min.js"></script>
    		<script src="../../../../../js/common/common.js"></script>
    		<script src="../../../../../js/lib/Validform_v5.3.2_min.js"></script>
    		<script src="../../../../../js/app/base/device/datum/editDeviceDatum.js"></script>
    	</body>
    </html>

## js代码 ##

/**
     * 资料上传
     * @author chenbin
     * @date 2019.08.21
     * 
     */
    
    var record = parent.datum.record;
    var datum_upload_url = parent.datum_upload_url;
    
    //是否显示缩略图
    record.picIsShow = false;
    
    if(record.type == 1){
    	record.picIsShow = true;
    }
    //只修改信息未上传附件
    var updataInfo = true;
    
    //vue初始化
    var vm = new Vue({
    	el: "#datumForm",
    	data: record
    })
    
    layui.use(['form', 'laydate', 'layer', 'upload'], function() {
    	var form = layui.form,
    		layer = layui.layer,
    		laydate = layui.laydate,
    		$ = layui.$,
    		upload = layui.upload;
    
    	var uploadParam = {};
    
    	var isSubmit = true;
    	var valid = $("#datumForm").Validform({
    		tiptype: 3,
    		callback: function(data) {
    			var p = Form.getFormJson(data);
    			if (isSubmit) {
    				update(p);
    			}
    			return false;
    		}
    	});
    
    	//类型下拉框
    	select.setSelectData("datum_type", "datumFilter", select.formatEnumDataByKey("datum_type"), form, false, function() {
    		if (record.type != null) {
    			$("#datum_type").val(record.type);
    		}
    		
    		$('.layui-form-select dl dd.layui-this').trigger('click');
    	});
    
    	//监听选中事件
    	form.on('select(datumTypeFilter)', function(data) {
    		if (data.value == 1) {
    			vm.picIsShow = true;
    		} else {
    			vm.picIsShow = false;
    		}
    	});
    
    	function update(obj) {
    		uploadParam = obj;
    		if(!updataInfo){
    			$("#uploadDatum").trigger('click');
    		}else{
    			updateInfo();
    		}
    		
    	}
    
    	$("#cancel").click(function() {
    		isSubmit = false;
    		var index = parent.layer.getFrameIndex(window.name);
    		parent.layer.close(index);
    	});
    
    	//文件上传
    	upload.render({
    		elem: '#selectDatum',
    		url: Ajax.formatUrl(datum_upload_url),
    		size: 1024 * 20,
    		accept: "file",
    		acceptMime: 'file',
    		auto: false,
    		bindAction: '#uploadDatum',
    		headers: {
    			'Authorization': LocalData.getToken()
    		},
    		choose: function(obj) {
    			updataInfo = false;
    			var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
    			//预读本地文件示例，不支持ie8
    			obj.preview(function(index, file, result) {
    				if (vm.picIsShow) {
    					$('#datumPic').empty();
    					var str = '<img src="' + result + '" style="height:80px;" class="layui-upload-img"/>';
    					$('#datumPic').append(str);
    				}
    				var name = $("#datumName").val();
    				if (comm.isEmpty(name)) {
    					$("#datumName").val(file.name);
    					$("#datumName").focus();
    					$("#datumName").blur();
    				}
    			});
    
    		},
    		before: function(obj) { //obj参数包含的信息
    			this.data = uploadParam;
    		},
    		done: function(res) {
    			console.log(res);
    			var index = parent.layer.getFrameIndex(window.name);
    			parent.layer.close(index);
    			// parent.layer.msg(data.msg);
    		}
    	});
    
    	//只修改信息未修改附件
    	function updateInfo(){
    		Ajax.Post(parent.edit_info_url, uploadParam, function(data) {
    			var index = parent.layer.getFrameIndex(window.name);
    			parent.layer.close(index);
    			parent.layer.msg(data.msg);
    		});
    	}
    
    	if(!comm.isEmpty(vm.url)){
    		if (vm.picIsShow) {
    			var url = datum.formatUrl(vm.url);
    			$('#datumPic').empty();
    			var str = '<img src="' + url + '" style="height:80px;" class="layui-upload-img"/>';
    			$('#datumPic').append(str);
    		}
    	}
    
    })

## 效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW5saTgwNzc_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW5saTgwNzc_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW5saTgwNzc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019082710313122.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW5saTgwNzc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW5saTgwNzc_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/927fb0c30acd4eb6bbdc9d56b2cfcd95.png