layui图片上传

layui图片上传实践

最新推荐文章于 2024-02-03 15:48:16 发布

weixin_30640291

最新推荐文章于 2024-02-03 15:48:16 发布

阅读量109

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/anxiang/p/10531863.html

<!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>