layui.user一个页面只能有一个，写多了会实现js效果
上传图片官方文档有很多功能，但是演示的代码只是一个一个功能演示，如果要综合起来js代码不是简单的拼凑，需要放在指定位置，比如下面的限制文件大小。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>layui动画测试</title>
<scriptsrc="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<linkrel="stylesheet"href="https://www.layuicdn.com/layui/css/layui.css">
<scriptsrc="https://www.layuicdn.com/layui/layui.js"></script>
</head>
<body>
<divstyle="text-align:center">
<imgdata-anim="layui-anim-scaleSpring"class="layui-uploadlayui-anim"id="id_upload_img"
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1564555274864&di=f0897dc4a00cccc5f71bdd0d46fe1720&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201608%2F21%2F20160821230024_MyCYK.thumb.700_0.jpeg"style="border-radius:50%;width:18%">
<divclass="layui-word-aux">点击更换我的头像</div>
<divclass="layui-word-aux">上传图片限制大小60kb</div>
</div>
<script>
layui.use(['upload'],function(){
varlayer=layui.layer;
var$=layui.jquery
,upload=layui.upload;
//普通图片上传开始
varuploadInst=upload.render({
elem:'#id_upload_img',
url:'/user/upload_img/',
size:60,//限制文件大小，单位KB
before:function(obj){
//预读本地文件示例，不支持ie8
obj.preview(function(index,file,result){
$('#id_upload_img').attr('src',result);//图片链接（base64）
});
},
done:function(res){
//如果上传失败
if(res.status>0){
returnlayer.msg('上传失败');
}
//上传成功
}
,error:function(){
//演示失败状态，并实现重传
vardemoText=$('#demoText');
demoText.html('<spanstyle="color:#FF5722;">上传失败</span><aclass="layui-btnlayui-btn-xsdemo-reload">重试</a>');
demoText.find('.demo-reload').on('click',function(){
uploadInst.upload();
});
}
});
//普通图片上传结束
})
</script>
</body>
</html>
如果您觉得本文的内容对您的学习有所帮助：
关键字：
html