码迷,mamicode.com
首页 > Web开发 > 详细

layui图片上传

时间:2019-03-14 18:14:19      阅读:707      评论:0      收藏:0      [点我收藏+]

标签:load()   text   服务器   cep   png   children   完全   end   size   

<!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图片上传

标签:load()   text   服务器   cep   png   children   完全   end   size   

原文地址:https://www.cnblogs.com/anxiang/p/10531863.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!