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

最新推荐文章于 2022-09-05 17:21:51 发布
最新推荐文章于 2022-09-05 17:21:51 发布
阅读量657 收藏 3
点赞数
CC 4.0 BY-SA版权
分类专栏： javascript vue layui 文章标签： layui上传 非自动上传
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xiaoyanli8077/article/details/100094166

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

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);
		}
	}

})

效果

基于unittest与pytest自动化测试框架的二次封装与优化实战
悦分享
05-10 792
pytest 是 python 的一种单元测试框架，同自带的 UnitTest 测试框架类似，相比于 UnitTest 框架使用起来更简洁，效率更高。非常容易上手，入门简单，文档丰富，文档中有很多实例可以参考支持简单的单元测试和复杂的功能测试支持参数化执行测试过程中可以将某些测试跳过，或者对某些预期失败的 Case 标记成失败支持重复执行失败的 Case支持运行由 Nose，UnitTest 编写的测试 Case具有很多第三方插件，并且可以自定义扩展方便的和持续集成工具集成。
layui 多文件、选择文件后不自动上传，带预览图
清叶 的专栏
07-10 2020
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib prefix="s" uri="/struts-tags"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + re.
layui--非自动文件上传 upload auto bindAction
唯爱赞多的博客
06-02 1243
非自动文件上传 upload auto bindAction
使用layui 上传图片 不自动上传
qq1343895881的博客
08-07 2532
 &lt;div class="layui-form-item"&gt;                     &lt;label class="layui-form-label"&gt;图片水印:&lt;/label&gt;                                      &lt;div class="layui-upload"&gt;          
ubuntu的边栏(sidebar)不见了如何恢复
flysky_jay的博客
12-07 1249
点击左上角的文件(files)，选中sidebar就行。
layui 上传插件 带预览 非自动上传功能 (非常实用)
qq_37246267的博客
04-04 8486
首先 Html部分: &lt;form method="post" action="?" onsubmit="return check();" id="form"&gt; &lt;div class="refund-img"&gt; &lt;div class="refund-img-item addRefundimg" id=&quot
layui upload非自动上传文件时（auto:false）报接口异常
weixin_42772271的博客
09-05 739
layui upload报接口异常
layui 表单上传文件 同一个页面多个上传控件
sinat_36279113的博客
03-31 4598
问题描述： 当一个html文件中存在多个上传控件，例如：既要上传文件，又要上传图片，此时怎么使用layui.upload ？ 解决办法：修改layui.upload中field参数，如下：（具体见js部分图片上传代码中） html页面元素 <div class="layui-form-item"> <label class="layui-form-label"&...
layui实现图片与视频上传
最新发布
03-29
用户引用了多个关于Layui上传的示例，包括多图上传、视频上传、文件类型限制、后端处理等。我需要将这些信息整合起来，形成一个结构清晰的回答。 首先，我应该介绍Layui上传的基本配置，比如引入必要的JS和CSS文件...
layui富文本编辑器前端无法取值的解决方法
10-16
在浏览器的开发者工具中，你可以看到富文本编辑器的值与原始的textarea值是分开存储的。因此，确保在尝试获取textarea值之前调用`layedit.sync()`方法。 如果你在弹出框中动态渲染富文本编辑器，确保在编辑器完全...
Python+Seleium+Autolt实现自动化上传文件
qq_43107323的博客
04-17 1267
一、下载Autolt 我这里下载的是zip解压就能用，其实需要的3个文件里面都有，只不过在都这个文件夹里面。所以下载这一个就行了 地址：https://www.autoitscript.com/site/autoit/downloads/ 二、解压后把3个需要的文件发到桌面 需要用到的3个文件，我当时以为是分开的，没少趟坑，这点是独有的 三、这个需要安装Seleium我就不写了，没有的可以看...
layui 上传文件upload不上传再次点击按钮时不执行choose小技巧.doc
06-04
一个简单的没有技术含量的方法
关于layui表单中按钮自动提交的解决方法
12-07
layui表单中的按钮会自动提交，这是一个很麻烦的事情。 这几天项目中多次用到表单按钮，仔细研究了下，找到了解决方法： 1、如果不需要放在表单中的按钮，最好不要放在表单中，不在layui的form中的按钮就不会进行自动提交了； 2、放在表单中的按钮可以通过js中的回调函数里添加 return false制止。filter中的参数指的是按钮中的lay-filter属性中的值，这个可以自己随便设。 比如： form.on('submit(filter)',function(data){ ...... return false; }); 但是，这里有一个很容易忽视的问题：如果按钮中没有添加
Layui实现文件上传：浏览不自动上传，在文本框中显示文件名
分享、进步、收获！！！
08-07 5449
Layui实现文件上传的各种方式，拖拽，直接上传，格式限制上传在Layui的官方文档中都有详细的说明以及实例，困扰我的就是如何让选择文件没上传之前将文件名显示在文本框内。 如图： <input type="text" readonly="readonly" name="title" required lay-verify="required" placeholder="请点击右侧浏览" ...
layui表单和文件上传
qq_36463418的博客
07-18 8095
layui表单和文件上传 近期用layui写了一个在表单中上传文件，因为这个表单和文件上传让我费劲了脑汁，因为第一次使用layui所以很多东西摸不清楚，后来查了资料才知道layui文件上传和from表单提交是异步的，分为两次提交，接下来我们详细介绍 话不多说，先上代码 html代码： <form class="layui-form" id="userForm" enctype="multip...
layUI中点击按钮选择图片(不自动上传)，然后点击上传按钮，上传图片(可以上传多个文件)
热门推荐
qzw_wmh的博客
12-20 3万+
效果图： 1、点击“选择文件”，进行选择将要上传的文件； 2、选择好将要上传的文件，文件名称显示在“选择文件”按钮后面； 3、点击“开始上传”按钮，显示在页面上，图片信息传到后台中，将图片进行保存； 4、还可以上传多个文件。 效果图上完了，就开始代码咯！   //layUI代码 &lt;div class="layui-upload"&gt; &lt;span...
layui文件上传控件，上传完文件之后自动清空以选择的文件
Mattscl的博客
04-13 1万+
最近遇到一个问题，就是使用layui文件上传控件的时候已经上传成功的控件会继续和原文件绑定在一起，影响第二次上传的效果（注意我是单文件上传控件，也就是每次只能选择一个文件）。 本来想要实现标题的效果，但是由于开发时间有限就换了一种解决方法。 当然这不是什么难题， 拿到layui的upoad.js源码分析一下还是可以找到对应的解决办法的。 前面多说了几句废话， 下面说一下解决方法： 在上传文件方法之...
layui 上传组件 连续上传同一个文件upload组件无反应
ll_883963的博客
08-09 919
问题描述：选择一个文件后，确定上传，上传失败，文件置空，但我再次选择这个文件的时候，upload选择无反应。 解决方案：在upload组件的choose内添加 uploadcom.config.elem.next()[0].value = ‘’; var uploadcom= upload.render({ elem: '#file-btn-upload' ,url: "" ,auto: false //选择文件后不自动上传 ,accept.
LayUI upload上传组件上传文件的两种方式（手动上传、自动上传）
旭东怪的博客
12-10 9392
1 手动上传 上传文件分为两步，第一步选择文件，第二步上传文件。 HTML代码： <input type='button' id='selectFile' value='选择文件'> <div id='fileDiv'></div> <input type='button' id='uploadFile' value='上传文件'> JS代码： $(function(){ initUpload(); }); //初始化上传组件 funct
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值