多图上传插件

￡神魔★判官ぃ 2022-06-16 07:54 268阅读 0赞

html部分：

<div class="form-group" style="margin-top:20px;">
                            <label  class="col-sm-3 control-label">商品图片：</label>
                            <div class="voucher_sc_tu">
                                <div class="voucher_sc" style="position:relative;">
                                    
                                    <div class="inputFileWrapper">
                                        <label for="upPhoto3" style="padding-left:14px;">
                                            <input type="file" id="upPhoto3" name='upload3'>
                                            <span class="custorm-style">
                                                      <span class="left-button">选择文件</span>
                                                        <span  style="margin-left:22px;line-height:40px;">轮播图：640*300e</span>
                                                    </span>
                                            
                                        </label>
    
                                    </div>
                                </div>
                                <ul  class="picul3" style="width: 500px;margin-left: 300px;list-style-type:none;padding-top:10px;"></ul>
                            </div>
                        </div>

页面js部分：

window.onload = function(){
            $.imageFileVisible3({
                wrapSelector: ".upPhotoImg3",
                fileSelector: "#upPhoto3",
            })
        }

要引用的js文件：

css样式部分：

.inputFileWrapper label{
                display: block;
                float: left;
                position: relative;
            }
            .inputFileWrapper input[type="file"]{
                position: absolute;
                width: 1px;
                height: 1px;
                clip:rect(0,0,0,0);
            }
            .inputFileWrapper .custorm-style{
                display: block;
                width: 390px;
                height: 40px;
            }
            .inputFileWrapper .custorm-style .left-button{
                width: 100px;
                line-height: 40px;
                background: #18a689;
                color: #fff;
                display: block;
                text-align: center;
                float: left;
            }
            .inputFileWrapper .custorm-style .right-text{
                width: 300px;
                height: 40px;
                line-height: 50px;
                display: block;
                float: right;
                padding: 4px;
                border: 1px solid #008ac7;
                overflow: hidden;
                -ms-text-overflow: ellipsis;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
    
            .picul3 li{
                width:100px;
                height:100px;
                float:left;
                position: relative;
                margin-right:15px;
            }
            .picul3 li .hd{
                width:20px;
                height:20px;
                background:url("/Public/img/del.png");
                background-size:100% 100%;
                position: absolute;
                right:0;top:0;
            }
            .picul3 li img{
                width:100%;
                height:100%;
            }