layui圖片上傳
阿新 • • 發佈：2019-03-14
height line put error: pla cti 完全 img obj
}
.img-box img{
width: 80px;
height: 80px;
margin: 5px 12px;
<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回調完全一致，可參見上文。
}
, 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>
<!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;
}
.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>
<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回調完全一致，可參見上文。
}
, 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圖片上傳