html
<div class="weui-uploader__bd">
class="weui-uploader__files" id="uploaderFiles">
<div class="weui-uploader__input-box hide">
id="uploaderInput" class="weui-uploader__input" accept="image/*" multiple type="file">div>
div>
<script src="lib/zepto.min.js">script>
<script src="lib/lrz.min.js">script>
<script type="text/javascript">
$(document).ready(function() {
uploaderFilesLoad("uploaderFiles", "uploaderInput", 5,
function() {
console.log("回调函数");
console.log(getImgFilesData("uploaderFiles")); //多张图片中以逗号分隔
});
});
script>
css
.weui-uploader__hd {display:-webkit-box;display:-webkit-flex;display:flex;padding-bottom:10px;-webkit-box-align:center;-webkit-align-items:center;align-items:center;}
.weui-uploader__title {-webkit-box-flex:1;-webkit-flex:1;flex:1;}
.weui-uploader__info {color:#B2B2B2;}
.weui-uploader__bd {margin-bottom:-4px;margin-right:-9px;overflow:hidden;}
.weui-uploader__files {list-style:none;margin:0px;padding:0px;}
.weui-uploader__file {float:left;margin-right:9px;margin-bottom:9px;width:120px;height:100px;background:no-repeat center center;background-size:cover;border:1px solid #DFDFDF;}
.weui-uploader__file_status {position:relative;}
.weui-uploader__file_status:before {content:" ";position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,0.5);}
.weui-uploader__file_status .weui-uploader__file-content {display:block;}
.weui-uploader__file-content {display:none;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:#FFFFFF;}
.weui-uploader__file-content .weui-icon-warn {display:inline-block;}
.weui-uploader__input-box {float:left;position:relative;margin-right:9px;margin-bottom:9px;width:100px;height:100px;border:1px solid #D9D9D9;}
.weui-uploader__input-box:before,.weui-uploader__input-box:after {content:" ";position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#D9D9D9;}
.weui-uploader__input-box:before {width:2px;height:39.5px;}
.weui-uploader__input-box:after {width:39.5px;height:2px;}
.weui-uploader__input-box:active {border-color:#999999;}
.weui-uploader__input-box:active:before,.weui-uploader__input-box:active:after {background-color:#999999;}
.weui-uploader__input {position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;opacity:0;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.weui-uploader__file-content img {height:20px;margin:5px;cursor:pointer;}
原创©本文章为孙正萌原创,未经许可,禁止转载
0条评论