2 cal cen cal_cen 于 2017.09.07 08:53 提问

页面有好几个上传图片的按钮,怎么能修改这段代码,让他有好几个按钮都好使

HTML

 <div class="big_box">
                    <div class="show_img" id="showidcardPh"></div>
                    <div class="uploader_img">
                        <input id="idcard_ph" name="file" type="file" capture="camera" accept="image/*" class="manner"/>
                    </div>
                </div>

JS

 $("#idcard_ph").change(function () {
    var fil = this.files;
    for (var i = 0; i < fil.length; i++) {
        reads(fil[i]);
    }
});
function reads(fil){
    var reader = new FileReader();
    reader.readAsDataURL(fil);
    reader.onload = function(){
        var num = document.getElementById("showidcardPh").getElementsByClassName("pic").length;
        if (num >= 1){
            $(".uploader_img").css({'display': 'none'});
        }else if(num <=1){
            $(".uploader_img").css({'display': 'block'});
            var showPicDiv = document.getElementById("showidcardPh");
            showPicDiv.innerHTML += '<div class="pic" style="float:left;margin-bottom:0.6rem;margin-left:0.5rem;border:1px solid #C6C6C6;width:150px;height:130px;text-align:center;display:inline-block;position:relative;z-index:300">'+
                                                        '<img class="goodsPico" style="width:90px;height:70px;" src="'+reader.result+'"></img>'+
                                                        '<img class="delete_icon"  src="../images/delete_icon-18-18.png" Onclick="delPic(this)"></img></div>';

        }
    };
}

/**
 * 功能:删除上传图片显示预览
function delPic(obj){
     var nowPic = $(obj).parent().remove();
}

怎么能再加几个上传按钮 并 上传的图片分别预览??

3个回答

wsb200514
wsb200514   2017.09.07 09:00

要么复制粘贴,需要几个就粘贴几遍,改一下id的值。或者用class代替id。

qq_35728177
qq_35728177   Ds   Rxr 2017.09.07 09:24

页面有多个相同的按钮,就用Id进行区分(相同的class)咯
然后相对应方法改成用class控制 然后Id进行区分 (或者直接用this就行)

 $(".class").change(function () {
    var fil =$(this).files;
    for (var i = 0; i < fil.length; i++) {
        reads(fil[i]);
    }
});
cal_cen
cal_cen 那预览显示问题呢? 这么改预览不了啊
3 个月之前 回复
Beamon__
Beamon__   2017.09.07 21:54

建议你将事件触发时执行的代码块进行函数封住,当事件触发,回调函数执行时,调用封装好的函数
------个人建议仅供参考

Csdn user default icon
上传中...
上传图片
插入图片