基于layui上传的一个简单实例_米醋屋个人技术博客

网站的上传是特别普遍的一个功能，之前也做过一些封装，近期感觉使用效果不是很好，因为每个页面需要的样式不同，而封装完成的样式就成了统一的，下面就简单的吧要使用到的元素单独拉出来，方便后期查阅和使用。

> 本框架是引用了layui框架，高度依赖layui，大家如果没有使用扯个框架就可以忽略了。

```

<input type="text" name="thumbnail"
	lay-verify="title" autocomplete="off"
	placeholder="图片地址"
	class="layui-input"
	{if isset($article)}value="{$article.thumbnail}"{/if}
>

<img class="layui-upload-img" id="demo1">

<div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
	<div class="layui-progress-bar" lay-percent=""></div>
</div>

<button type="button" id="test9999" class="layui-btn layui-btn-primary">上传图片</button>

上述3个按需复制
```

js代码

```

layui.use(['upload','element'], function(){
		var upload = layui.upload;
		var element = layui.element;
		//执行实例
		var uploadInst = upload.render({
			elem: '#test9999' //绑定元素
			,url: "{:url('Upload/upload')}" //上传接口
			,exts:'jpg|png|gif|bmp|jpeg|ico'
			,done: function(res){
				//上传完毕回调
				layer.closeAll(); //关闭loading
				if(res.code == 1 ||res.code ==200){
					$("#demo1").attr("src",res.data)
					$("input[name=thumbnail]").val(res.data)
					layer.msg(res.msg,{icon:1});
				}else {
					layer.msg(res.msg,{icon:0});
				}
			}
			,progress: function(n, elem){
				var percent = n + '%' //获取进度百分比
				element.progress('demo', percent); //可配合 layui 进度条元素使用
				//以下系 layui 2.5.6 新增
				console.log(elem); //得到当前触发的元素 DOM 对象。可通过该元素定义的属性值匹配到对应的进度条。
			}
			,error: function(){
				//请求异常回调
				layer.closeAll(); //关闭loading
				layer.msg("上传出错，稍后重试",{icon:0});
			}
		});
	});
```

注:原创不易,转载请注明出处( https://micuu.com/new/1712.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。