2 cal cen cal_cen 于 2017.09.07 13:59 提问

求大神帮忙指点下,怎么能让上传的图片分别预览

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>
               <div class="big_box">
                    <div class="show_img" id="showidcardPho"></div>
                    <div class="uploader_img">
                        <input id="idcard_phc" name="file" type="file" capture="camera" accept="image/*" class="manner"/>
                    </div>
                </div>

JS代码

 $(".manner").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.getElementsByClassName("pic").length;
        if (num == 0){
            $(".uploader_img").css({'display': 'none'});
            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>'+
                                                        '<div class="red_border"></div>'+
                                                        '<img class="delete_icon"  src="../images/delete_icon-18-18.png" Onclick="delPic(this)"></img></div>';
        }
    };
}
 /* 功能:删除上传图片显示预览*/
 function delPic(obj){
     var nowPic = $(obj).parent().remove();
     $(".uploader_img").css({'display': 'block'});
}

现在运行后,点击上传,这段代码报错
i < fil.length; i++) {

Uncaught TypeError: Cannot read property 'length' of undefined

求大神帮忙修改下,对JS和JQ不是太精通

2个回答

u013181058
u013181058   2017.09.07 14:18

fil为undefined,就是.manner下没有files这个属性

wbzhang2010
wbzhang2010   2017.09.07 14:35

var fil = $(this).files; 改为 var fil = this.files;

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