文件上传upload.render小记

最新推荐文章于 2024-09-23 10:40:21 发布
最新推荐文章于 2024-09-23 10:40:21 发布
阅读量9.7k 收藏 4
点赞数 1
分类专栏： layui upload 文章标签： upload jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_41115103/article/details/106428355
版权
本文记录了在使用upload组件时遇到的一个问题，即在查询操作后，文件上传按钮失效。关键在于初始化上传组件应在页面渲染之后进行，以确保所有元素加载完毕。通过调整代码顺序，确保先进行页面渲染，再调用上传按钮的加载方法，成功解决了这个问题。

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

upload.render失效

遇到的问题：

初始化时能正常打开上传，但点击查询后上传按钮失效
在这里插入图片描述

正确代码如下：


if(paramPage>0){
	var curr=paramPage;
}else{
	var curr = 1;	
}
var pageSize = 10;
$(function() {
	find(curr);
})
function find(currs) {
	if(currs!=null){
		curr = currs;
	}
	var examType = $("#examType").val();
	var year = $("#year").val();
	var term = $("#term").val();
	$.ajax({
		url : ctx + "/ScoreRegistration/queryCourse",
		type : "post",
		data : {
			"pageNum" : curr,
			"pageSize" : pageSize,
			"year" : year,
			"term" : term,
			"examType":examType
		},
		dataType : "json",
		async : true,
		contentType : "application/x-www-form-urlencoded",
		success : function(result) {
			if(result.code!="-1"){
				$("#no_data").hide();
				$("#table_div").show();
				$("#t_body_class").html("");
				var courseList = result.data.list;
				for (var i = 0; i < courseList.length; i++) {
					var str = "";
					var inde = ((10*(curr-1))+i+1);
					str += "<tr><td>"+((10*(curr-1))+i+1)+"</td>"
					str += "<td>"+courseList[i].grade+"</td>";
					str += "<td title="+courseList[i].yearTerm+">"+courseList[i].yearTerm+"</td>";
					str += "<td title="+courseList[i].className+">"+courseList[i].className+"</td>";
					str += "<td title="+courseList[i].courseName+">"+courseList[i].courseName+"</td>";
					str += "<td title="+courseList[i].teacherName+">"+courseList[i].teacherName+"</td>";
					str += "<td title="+courseList[i].auditStatus+">"+courseList[i].auditStatus+"</td>";
					if(courseList[i].auditStatus=='未录入'){
						str += "<td>" +"<input type='button' value='录入' class='my-button' οnclick='typeIn("+courseList[i].grade+","+year
						+","+term+","+courseList[i].courseId+","+courseList[i].teacherId+","+courseList[i].classId+","
						+courseList[i].majorId+","+courseList[i].deptId+",\""
						+courseList[i].majorName+"\",\""+courseList[i].deptName+"\",\""+courseList[i].courseName+"\")'>" 
						+"<button type='button' class='layui-btn layui-btn-primary' id='upload_excel_"+inde+"'><i class='layui-icon layui-icon-upload-circle'></i></button>";
					}else if(courseList[i].auditStatus=='录入中'){
						str += "<td>" +"<input type='button' value='录入' class='my-button' οnclick='typeIn("+courseList[i].grade+","+year
						+","+term+","+courseList[i].courseId+","+courseList[i].teacherId+","+courseList[i].classId+","
						+courseList[i].majorId+","+courseList[i].deptId+",\""
						+courseList[i].majorName+"\",\""+courseList[i].deptName+"\",\""+courseList[i].courseName+"\")'>"+"<input type='button' value='提交' class='my-button' οnclick='submitScoreAudit("+courseList[i].id+","+courseList[i].grade+","+year
						+","+term+","+courseList[i].courseId+","+courseList[i].teacherId+","+courseList[i].classId+","
						+courseList[i].majorId+","+courseList[i].deptId+")'>";
					}
					str+="</td></tr>";
					$("#t_body_class").append(str);
					loadLayerEL(inde,courseList[i].grade,year,term,courseList[i].courseId,courseList[i].teacherId,courseList[i].classId,courseList[i].majorId,courseList[i].deptId,courseList[i].majorName,courseList[i].deptName,courseList[i].courseName)
				}
			}else{
				$("#no_data").show();
				$("#table_div").hide();
			}
			layui.use(['laypage', 'layer'], function(){
				var laypage = layui.laypage,
				layer = layui.layer;
				laypage({
					cont:'demo7',
					pages : result.data.pages,
					skip : true,
					curr : curr,
					jump : function(obj, first) {
						newpage = obj.curr;
						if (!first) {
							find(newpage);
						}
					}
				});
	 		})
		}
	});
}
/**
 * 加载layer的依赖
 * @returns
 */
var  files = null;
function loadLayerEL(inde,grade,year,term,courseId,teacherId,classId,majorId,deptId,majorName,deptName,courseName){
	var params = {
	"grade":grade,
	"year":year,
	"term":term,
	"courseId":courseId,
	"teacherId":teacherId,
	"classId":classId,
	"examType":examType,
	"majorId":majorId,
	"deptId":deptId,
	"page":curr
}
	
	layui.use(['element','upload','form'], function(){
		  var element = layui.element;
		  var $ = layui.jquery,upload = layui.upload;
		  /*上传文件*/
		  upload.render({ //允许上传的文件后缀
			    elem: '#upload_excel_'+inde,
			    url: ctx+'/ScoreRegistration/importScholarStudent',
			    accept: 'file', //普通文件,
			    data: params,
			    auto:true,//是否自动上传
			    exts: 'xls|xlsx', //只允许上传excel文件
			    progress: function(n, elem){
			        var percent = n + '%' //获取进度百分比
			        element.progress('#upload_excel_'+inde, percent);
			        console.log(elem); 
			    },
			    done: function(res){//上传完成后回调
			    	deletefile();
			    	if(res.msg=="请求上传接口出现异常"){
			    		layer.msg("请检查上传表格中数据");
			    		return false;
			    	}else{
			    		layer.msg(res.msg,{time:5000});
			    		find(1);
			    	}
			    },
			    choose:function(obj){
			        deletefile();
			        //将每次选择的文件追加到文件队列
			         files = obj.pushFile();
			       }
		  });
	});
}

/**
 * 清除文件
 * @returns
 */
function deletefile(){
	if(null != files){
		for(var i = 0 ; i<Object.keys(files).length;i++){
			delete  files[Object.keys(files)[i]];
		}
		files = null;
	
	}
}

分析错误代码：

$.ajax({
		url : ctx + "/ScoreRegistration/queryCourse",
		type : "post",
		data : {
			"pageNum" : curr,
			"pageSize" : pageSize,
			"year" : year,
			"term" : term,
			"examType":examType
		},
		dataType : "json",
		async : true,
		contentType : "application/x-www-form-urlencoded",
		success : function(result) {
			if(result.code!="-1"){
				$("#no_data").hide();
				var courseList = result.data.list;
				var str = "";
				for (var i = 0; i < courseList.length; i++) {
					var inde = ((10*(curr-1))+i+1);
					str += "<tr><td>"+((10*(curr-1))+i+1)+"</td>"
					str += "<td>"+courseList[i].grade+"</td>";
					str += "<td title="+courseList[i].yearTerm+">"+courseList[i].yearTerm+"</td>";
					str += "<td title="+courseList[i].className+">"+courseList[i].className+"</td>";
					str += "<td title="+courseList[i].courseName+">"+courseList[i].courseName+"</td>";
					str += "<td title="+courseList[i].teacherName+">"+courseList[i].teacherName+"</td>";
					str += "<td title="+courseList[i].auditStatus+">"+courseList[i].auditStatus+"</td>";
					if(courseList[i].auditStatus=='未录入'){
						str += "<td>" +"<input type='button' value='录入' class='my-button' οnclick='typeIn("+courseList[i].grade+","+year
						+","+term+","+courseList[i].courseId+","+courseList[i].teacherId+","+courseList[i].classId+","
						+courseList[i].majorId+","+courseList[i].deptId+",\""
						+courseList[i].majorName+"\",\""+courseList[i].deptName+"\",\""+courseList[i].courseName+"\")'>" 
						+"<button type='button' class='layui-btn layui-btn-primary' id='upload_excel_"+inde+"'><i class='layui-icon layui-icon-upload-circle'></i></button>";
					}else if(courseList[i].auditStatus=='录入中'){
						str += "<td>" +"<input type='button' value='录入' class='my-button' οnclick='typeIn("+courseList[i].grade+","+year
						+","+term+","+courseList[i].courseId+","+courseList[i].teacherId+","+courseList[i].classId+","
						+courseList[i].majorId+","+courseList[i].deptId+",\""
						+courseList[i].majorName+"\",\""+courseList[i].deptName+"\",\""+courseList[i].courseName+"\")'>"+"<input type='button' value='提交' class='my-button' οnclick='submitScoreAudit("+courseList[i].id+","+courseList[i].grade+","+year
						+","+term+","+courseList[i].courseId+","+courseList[i].teacherId+","+courseList[i].classId+","
						+courseList[i].majorId+","+courseList[i].deptId+")'>";
					}else if(courseList[i].auditStatus=='已提交'){
						str += "<td>" +"<input type='button' value='取消提交' class='my-button' οnclick='disScoreAudit("+courseList[i].grade+","+year
						+","+term+","+courseList[i].courseId+","+courseList[i].teacherId+","+courseList[i].classId+","
						+courseList[i].majorId+","+courseList[i].deptId+")'>";
						str += "" +"<input type='button' value='打印' class='my-button' οnclick='printScore("+courseList[i].grade+","+year
						+","+term+","+courseList[i].courseId+","+courseList[i].teacherId+","+courseList[i].classId+","
						+courseList[i].majorId+","+courseList[i].deptId+","+courseList[i].id+",\""
						+courseList[i].majorName+"\",\""+courseList[i].deptName+"\",\""+courseList[i].courseName+
						"\",\""+courseList[i].className+"\",\""+courseList[i].teacherName+"\",\""+courseList[i].courseType+"\")'>";
					}else if(courseList[i].auditStatus=='未审核通过'){
						str += "<td>" +"<input type='button' value='提交' class='my-button' οnclick='submitScoreAudit("+courseList[i].id+","+courseList[i].grade+","+year
						+","+term+","+courseList[i].courseId+","+courseList[i].teacherId+","+courseList[i].classId+","
						+courseList[i].majorId+","+courseList[i].deptId+")'>";
					}else if(courseList[i].auditStatus=='已发布'){
						str += "<td>" +"<input type='button' value='打印' class='my-button' οnclick='printScore("+courseList[i].grade+","+year
						+","+term+","+courseList[i].courseId+","+courseList[i].teacherId+","+courseList[i].classId+","
						+courseList[i].majorId+","+courseList[i].deptId+","+courseList[i].id
						+",\""+courseList[i].majorName+"\",\""+courseList[i].deptName+"\",\""+courseList[i].courseName+
						"\",\""+courseList[i].className+"\",\""+courseList[i].teacherName+"\",\""+courseList[i].courseType+"\")'>";
					}
					str+="</td>";
					loadLayerEL(inde,courseList[i].grade,year,term,courseList[i].courseId,courseList[i].teacherId,courseList[i].classId,courseList[i].majorId,courseList[i].deptId,courseList[i].majorName,courseList[i].deptName,courseList[i].courseName)
				}
				$("#t_body_class").html(str);
				$("#table_div").show();
			}else{
				$("#no_data").show();
				$("#table_div").hide();
			}
  • 代码是渲染页面在后，赋值调用loadLayerEL方法在前，但此时页面的这些值是没有给到的，直接调用上传按钮，此时是不起作用的，需要先给页面渲染，再去调用
Java实现上传图片功能
BXERP（集成小程序的多商户开源收银系统）。代码托管在CodeChina和GitHub
12-21 621
以本产品的上传商品图片为例，它包含了”上传图片后的预览”、”清空预览图片”、”保存图片"三个部分。上传图片后，先将图片文件临时存放到session中，如果需要保存图片，再从session中获取到文件并保存到服务器。 1、上传图片预览 上传图片预览实现了上传图片，并且在页面显示图片，此时还没有在服务器完成修改操作： (1)上传图片HTML代码。 <div class="commodi...
Layui解决upload的data参数传输失败问题
最新发布
milk_yan的博客
02-25 502
layui上传文件时，有时候需要往后台多传递一些自定义的参数，按照官方的写法upload.render初始化的data:{id:"sss"}不能传参到后台。
Layui的layui.upload.render在上传文件之前校验参数合法性
dongyan3595的博客
06-15 1925
layui.upload.render在上传之前校验参数时, 并没有办法阻止其继续上传文件.通过修改upload.js则可在before回调中用返回false来阻止上传。需要对upload.js进行修改。需要修改的地方未y函数内的代码.
layui upload.render上传组件js动态添加html后再次渲染
冰夜翎博客
04-21 6832
页面效果 页面代码： <!-- 轮播图 --> <input type="hidden" name="mcBaunell" id="mc_baunell" value=""> <div class="layui-form-item"> <label...
layui upload.render 设置文件名
weixin_41203765的博客
09-23 1140
在使用 layui 的方法进行文件上传时，通常文件名是由用户选择文件时决定的，即文件本身的名字。但是，在某些情况下，你可能需要在上传前修改文件名，或者上传后在服务器端进行处理时更改文件名。这里主要讨论在前端（即使用）时的一些操作思路。
layui中upload.render阻止文件上传
qq_37251530的博客
01-21 8770
layui里upload.render 方法阻止文件上传 upload.render文件上传时，如果需要在上传文件前，添加判定。如果不符合则终止上传，根据layui 文档 在 before 方法里 return false 就可以，但是很多人加了 都没有效果，在网上找了两种方法 第一种：修改upload.js文件 将 y=function（）{} 中的方法换成如下的方法， retur...
layui文件上传控件带更改后数据传值的方法
10-16
var upload = layui.upload; var uploadInst = upload.render({ elem: '#uploadBtn' //绑定元素 ,url: 'your/upload/url' //你的上传接口 ,done: function(res){ //上传完毕回调 } ,error: function(){ //...
var xiangpianUpload = upload.render中的upload.render方法如何实现的？
05-15
当用户选择或拖拽文件到组件中时，`upload.render` 方法会将选择的文件或文件信息发送到指定的上传接口，等待服务器返回上传结果。在上传过程中，该方法会触发一系列事件，例如上传进度、上传成功、上传失败等事件，...
解决koa2 ctx.render is not a function报错问题
10-18
在使用Koa2进行Web应用开发时，可能会遇到一个常见的错误，即在执行ctx.render()方法时，控制台显示ctx.render is not a function。这一问题通常与Koa中间件的使用顺序有关。 首先，让我们先明确一下Koa的中间件...
layui数据表格 table.render 报错的解决方法
10-16
仔细检查应用服务器的日志文件。日志中可能包含更详细的错误信息或堆栈跟踪，有助于定位问题。 4. 清除缓存 清除浏览器缓存或服务器端缓存，有时候缓存的内容可能导致模板没有更新，从而引起解析错误。 5. 升级...
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
10-16
首先，确保正确地引入了LayUI的CSS和JS文件。在HTML头部，你需要添加如下代码： ```html ${ctx}/adminthemes/version3/plugins/layui/css/layui.css" rel="external nofollow" /> ${ctx}/adminthemes/version3/...
layui一个页面使用多个文件upload上传按钮
09-02
layui一个页面使用多个文件upload上传按钮
layui上传HTML,layui.upload.render 用js添加的html 点击上传无效
weixin_42609225的博客
06-08 1247
$("#add_link").click(function(){var link_html = "" +"" +"*主讲人" +"" +"" +"" +"*主讲人简介" +"" +"" +"" +"*来源" +"" +"" +"" +"*开始时间" +"" +"" +"" +"*结束时间" +"" +"" +"" +"上传视频" +"上传视频" +"" +"" +"添加文档" +"" +"选择多...
多文件上传
weixin_43343423的博客
06-18 208
//多文件列表示例 var demoListView = $('#imageList'); var uploadListIns = upload.render({ elem: '#chooseImageList' , url: '<%= requ...
layui 文件上传upload.render清空已选择文件并重新选择同名文件
withwindluo的博客
05-13 6895
做需求时遇到个问题，上传的excel文件检验后不符合数据要求，需要清空已上传的缓存 $('.layui-upload-file').attr('type', 'hidden'); $('.layui-upload-file').attr('type', 'file'); clearFile(); demo var UPLOAD_FILES; upload.render({ elem: '#uploadFile', //绑定元素 // url: '/property/importData',
upload.render is not a function
醉殇姒若梦遗年 ツ的博客
12-01 8284
upload.render is not a function最近使用layui框架做一个上传文件的功能，发现控制台报错:upload.render is not a function仔细检查引入的layui.css和layui.js文件发现没有什么问题，又去重新阅读了一下官方文档用法没有找到错误，后来突然发现问题出在layui的版本上，layui的2.0之前的版本和2.0之后的版本相比有较大改动，
layui在上传图片在前端处理图片压缩
各类程序设计成品、文档、学习资料
10-07 1038
/停止原本的上传，如果多个文件，需要在读取完毕后将files里面的文件队列全删除。img.onload = function () { //图片加载完毕。//上传loading。//进行图片压缩，直接百度压缩方法。
layui使用upload组件上传图片前的压缩
05-20 2559
对于很多情况，我们都有在前端压缩图片后再上传的需求，如果是单独的上传过程直接做就可以，但对于layui这种框架就需要注意下了。 具体方法如下（前端压缩图片我使用的是image compressor这个JS库）： upload.render({ elem: '#uploadpicbtn' , url: somewhere //必填项 , auto: false , choose: function (obj)
使用layui的upload.render遇到的问题
zxcxixixi的博客
12-28 8252
需求要在选择文件上传后显示文件名并且支持删除，此时还未正式上传走接口。 首先要展示，需要在choose方法中增加方法，我的是动态添加表格并且支持删除当前数据，也试过使用layui的table.on不过不知道为啥就是不支持，所以采用bind的方法来触发删除事件，同时也能使用onclick事件但是参数可能拼写的比较麻烦，比如 οnclick=deleteFile("’+index+’")； ...
upload.render多文件
05-19
在使用 upload.render 上传文件时，可以通过设置 multiple 属性为 true，来实现多文件上传的功能。 示例代码： ```html <div id="upload"> <input type="file" name="file" multiple> </div> <script> layui.use('upload', function(){ var upload = layui.upload; //执行实例 upload.render({ elem: '#upload', url: '/upload/', multiple: true, done: function(res){ console.log(res) } }); }); </script> ``` 在上面的示例代码中，input 标签的 multiple 属性被设置为了 true，表示可以选择多个文件进行上传。在 upload.render 方法中，也需要设置 multiple 属性为 true，以实现多文件上传的功能。 上传成功后，回调函数 done 中会返回一个上传成功的文件信息，可以根据需求进行处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值