zoukankan      html  css  js  c++  java
  • h5手机端上传多张图片(界面上的展示图片,删除图片)

    html:

    <!--    照片添加    -->
    <div class="z_photo">
        <div class="z_file">
            <input type="hidden" name="ActiveFile" id="ActiveFile">
            <input type="file" name="File" id="file" accept="image/*" multiple onchange="imgChange('z_photo','z_file');" />
        </div>
    </div>
    <!--遮罩层-->
    <div class="z_mask">
        <!--彈出框-->
        <div class="z_alert">
            <p>确认要删除这张图片吗</p>
            <p>
                <span class="z_cancel">取消</span>
                <span class="z_sure">确定</span>
            </p>
        </div>
    </div>

    css:

    /* file */
    .z_photo {
        width: 100%;
        height: 200px;
        padding: 10px;
        overflow: auto;
        clear: both;
        margin: 10px auto;
        border: 1px solid #ddd;
    }
    
    .z_photo img {
        width: 60px;
        height: 60px;
    }
    
    .z_addImg {
        float: left;
        margin-right: 0.2rem;
        border: 1px solid #dedede;
    }
    
    .z_file {
        width: 60px;
        height: 60px;
        background: url(../images/z_add.png) no-repeat;
        background-size: 100% 100%;
        float: left;
        margin-right: 0.2rem;
    }
    
    .z_file input::-webkit-file-upload-button {
        width: 60px;
        height: 60px;
        border: none;
        position: absolute;
        outline: 0;
        opacity: 0;
    }
    
    .z_file input#file {
        display: block;
        width: auto;
        border: 0;
        vertical-align: middle;
    }
    /*遮罩层*/
    
    .z_mask {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .5);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        display: none;
    }
    
    .z_alert {
        width: 300px;
        height: 200px;
        border-radius: 3px;
        background: #fff;
        font-size: 15px;
        text-align: center;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -150px;
        margin-top: -100px;
    }
    
    .z_alert p:nth-child(1) {
        line-height: 150px;
    }
    
    .z_alert p:nth-child(2) span {
        display: inline-block;
        width: 49%;
        height: 50px;
        line-height: 50px;
        float: left;
        border-top: 1px solid #ddd;
    }
    
    .z_cancel {
        border-right: 1px solid #ddd;
    }
    .FileShow-wrap li{
        background-color: #dedede;
        margin-bottom: 10px;
        line-height: 40px;
        padding: 0 30px 0 5px;
        position: relative;
    }
    .FileShow-wrap li i{
        position: absolute;
        color: red;
        right: 5px;
        font-weight: bold;
    }

    js:

    var ActiveFileArr = []
    function imgChange(obj1, obj2) {
        //獲取點選的文本框
        var file = document.getElementById("file");
        //存放圖片的父級元素
        var imgContainer = document.getElementsByClassName(obj1)[0];
        //獲取的圖片文件
        var fileList = file.files;
        //文本框的父級元素
        var input = document.getElementsByClassName(obj2)[0];
        var imgArr = [];
        //遍曆獲取到得圖片文件
        for (var i = 0; i < fileList.length; i++) {
            var imgUrl = window.URL.createObjectURL(file.files[i]);
            imgArr.push(imgUrl);
            var img = document.createElement("img");
            img.setAttribute("src", imgArr[i]);
            var imgAdd = document.createElement("div");
            imgAdd.setAttribute("class", "z_addImg");
            imgAdd.appendChild(img);
            imgContainer.appendChild(imgAdd);
        };
        imgRemove();
    };
    
    function imgRemove() {
        var imgList = document.getElementsByClassName("z_addImg");
        var mask = document.getElementsByClassName("z_mask")[0];
        var cancel = document.getElementsByClassName("z_cancel")[0];
        var sure = document.getElementsByClassName("z_sure")[0];
        var file = document.getElementById("file");
        var fileList = file.files;
        for (var j = 0; j < imgList.length; j++) {
            imgList[j].index = j;
            imgList[j].onclick = function() {
                var t = this;
                mask.style.display = "block";
                cancel.onclick = function() {
                    console.log(fileList)
                    mask.style.display = "none";
                };
                sure.onclick = function() {
                    ActiveFileArr.push($(t).index()-1)
                    $("#ActiveFile").val(ActiveFileArr.join())
                    mask.style.display = "none";
                    t.style.display = "none";
                };
    
            }
        };
    };
    与尘埃中开出花朵。
  • 相关阅读:
    Createjs学习心得之使用EaselJs实现拖拽效果
    学习笔记——复杂的窗口分帧
    cordova 插件开发
    wcf rest 服务用于安卓和ISO调用5-------验证
    wcf rest 服务用于安卓和ISO调用4-------多文件上传
    wcf rest 服务用于安卓和ISO调用3-------soap与rest共用
    wcf rest 服务用于安卓和ISO调用2-------文件上传
    wcf rest 服务用于安卓和ISO调用1
    RecycleView 瀑布流滑动移位
    RecycleView 滑动到底部,加载更多
  • 原文地址:https://www.cnblogs.com/congfeicong/p/13032299.html
Copyright © 2011-2022 走看看