layui 上传插件带预览非自动上传功能 (非常实用)

最新推荐文章于 2025-05-28 09:50:38 发布

原创

最新推荐文章于 2025-05-28 09:50:38 发布 · 8.4k 阅读

14 ·

CC 4.0 BY-SA版权

本文介绍了如何使用 layui 2.2.5 版本创建一个带预览功能且不自动上传的上传组件。通过修改 upload.js 文件中的 before 事件，实现了手动触发上传的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先 Html部分:

	<form method="post" action="?" onsubmit="return check();" id="form">
	<div class="refund-img">
		<div class="refund-img-item addRefundimg" id="addImg">
			<img class="proimg" src="{DT_PATH}member/images/addbanner.png">
		</div>
		<input type="hidden" name="thumb[]" id="proImg1">
		<input type="hidden" name="thumb[]" id="proImg2">
		<input type="hidden" name="thumb[]" id="proImg3">
	</div>
	<span class="refund-img-prompt">Max. 3 attachements. Max. 3MB for each image.</span>
	<div class="comment-btn" id="comment-btn">Submit</div>
	<input style="display: none;" type="submit" name="submit" id="submitForm"/>
	</form>

JS部分:

//添加图片
		layui.use('upload', function() {
		    var upload = layui.upload;//得到upload对象


		    var frequency = 0;//记录上传成功的个数


		    //多文件列表示例
		    var demoListView = $('.comment-imgbox.refund-img #addImg'),
	        uploadListIns = upload.render({ //执行实例
	            elem: '#addImg',//绑定文件上传的元素
	            url: '../upload.php',
	            multiple: true,
	    &