15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 js

上传图片可换位置控制上传数量

孙正萌| 发布于 2022-05-30 14:58:08| 540阅读| 0点赞| 0评论
举报

上传多图控制数量,支持图片位置切换



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>


js


 <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

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

孙正萌
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部