layui upload 上传组件(图片、文件) data 其它参数如何传参 同时加上传进度条

传其它参数:

html:

			 <div id="type1" style="display: block;">
				<div class="layui-form-item">
					  <label class="layui-form-label">图片/文件</label>
					  <div class="layui-input-block layui-upload">
						  <button type="button" class="layui-btn" id="test-upload-normal">上传</button>
						  <div class="layui-upload-list">
							<img class="layui-upload-img" id="test-upload-normal-img">
							<p id="test-upload-demoText"></p>
						  </div>
					  </div>
				</div>

js代码

	//上传文件(统一接口)
	var uploadInst = upload.render({
		  elem: '#test-upload-normal'
		  ,url: '{:url('uploads')}'
		  ,data: {
			  upload_type: function(){
					return $("input[name='upload_type']:checked").val();
				},
			  file_type:function(){
					return $("input[name='type']:checked").val();
				}
		  }
		  ,before: function(obj){
			//预读本地文件示例,不支持ie8
			obj.preview(function(index, file, result){
			  $('#test-upload-normal-img').attr('src', result); //图片链接(base64)
			});
		  }
		  ,done: function(res){
			//如果上传失败 
			  return layer.msg('上传失败');
			//上传成功
			// $('#test-upload-normal').innerHTML='上传';
			// console.log('3000')
		  }
		  ,error: function(){
			//演示失败状态,并实现重传
			var demoText = $('#test-upload-demoText');
			demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
			demoText.find('.demo-reload').on('click', function(){
			  uploadInst.upload();
			});
		  },
		  progress: function(n, elem){
			var percent = n + '%' //获取进度百分比
			// element.progress('demo', percent); //可配合 layui 进度条元素使用
			//loading层
			elem.innerHTML = '<i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i><span>'+n+'</span>';
			//以下系 layui 2.5.6 新增
			// console.log('===',elem.innerText); //得到当前触发的元素 DOM 对象。可通过该元素定义的属性值匹配到对应的进度条。
		  }
	}); 

进度条部分:

官方文档:

https://www.layui.com/doc/modules/upload.html

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值