<!DOCTYPE html>
<html>
<head>
<title>layui图片上传</title>
<script type="text/javascript" src="./jquery11.js"></script>
<script type="text/javascript" src="./layui/layui.js"></script>
</head>
<style type="text/css">
.img-box{
width: 100px;
height: 100px;
border: #ccc 1px solid
}
.img-box img{
width: 80px;
height: 80px;
margin: 5px 12px;
}
span{
font-size: 12px;
display: line-block;
width: 100px;
text-align: center;
}
input{
opacity: 0
}
</style>
<body>
<div class="img-box" id="test1">
<img src="./img.jpg" >
</div>
<span>上传图片</span>
</body>
<script type="text/javascript">
layui.use(‘upload‘, function () {
???????var uploadurl = "/user/accountservice/";//上传服务器
???????var $ = layui.jquery
???????????, upload = layui.upload;
???????//拖拽上传
???????upload.render({
???????????elem: ‘#test1‘
???????????, url: uploadurl
???????????, before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
???????????????layer.load(); //上传loading
???????????}
???????????, done: function (res, index, upload) {//返回来的数据
???????????????$("#test1").children(‘img‘).attr(‘src‘,res.url);//赋值显示图片
???????????????layer.closeAll(‘loading‘); //关闭loading
???????????}
???????????, error: function (index, upload) {
???????????????layer.closeAll(‘loading‘); //关闭loading
???????????}
???????????, accept: ‘images‘ //允许上传的文件类型,
???????????, exts: ‘jpg|png‘
???????????, size: ‘5000‘
???????????, acceptMime: ‘image/jpg, image/png‘
???????});
???});
</script>
</html>
layui图片上传
原文地址：https://www.cnblogs.com/anxiang/p/10531863.html