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
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
TXT在线小说管理器
不知道哪里写错了,各位大神帮忙指点下,告诉怎么进行修改
java题库8
1. 一个没有实现Serializable接口的父类,编写一个能够序列化的子类 ,只要父类实现了序列化的接口,或者,子类实现了序列化的接口就可以序列化 “transient”——“瞬态”,先不说这个翻译是否恰当,这个变量关键字一直不曾使用,简单的说就是被瞬态定义的变量不可序列号。或者这么给他换个名字——“不可序列化状态”。 打个比方,如果一个用户有一些敏感信息(譬如密码,银行卡号等),为了安
头像截取上传并预览
本人使用的是jfinal+ajaxSubmit异步提交+jcrop截取,说下思路:点击上传图片并保存在服务器(原始图),然后初始化jcrop,并计算预览图。保存时提交截取的图片位置等信息后台在同比缩放之后截取保存即可。 一、页面 <div class="pic-wrap"> <a class="pass-port
(地主源代码)求解! 做的不够好,求大神指点
(地主源代码)求解! 做的不够好,求大神指点
fifo to uart
VHDL 带fifo的uart 源代码,求大神帮忙修改。
新浪漫步者6.1
感觉很不好的一个软件 求更好的 有没有大神帮忙!
jsp中点击图片弹出文件上传界面及实现预览
花了两天时间琢磨一下图片预览的功能 任务需求如下:1:jsp页面中有一个图片(pic_1)     2:点击图片弹出类似于资源管理器的界面     3:选择完某一个图片之后在pic_1处预览 我在IE8上试验下面这段代码,可以实现上述功能,没有在别的浏览器中测试,如果各位朋友知道多种浏览器的支持方法,请赐教,共同学习,谢谢。 Insert title here functi
实现图片、音视频文件的上传预览
最近在做关于图片和音视频的上传,上传使用的是stream上穿插件,很好用,但是上传之前需要对上传的图片和音视频进行预览,来确定是否删除某些上传文件,先看代码: stream上传插件地址:http://www.twinkling.cn/(很好用的上传插件) &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt...
关于图片,pdf上传,预览,下载
       其实 上传照片跟上传pdf 还有其他 影音类的文件差不多  就是jsp 页面上显示的方式不一样       废话不多说,直接上代码      1. 上传文件  首先有个上传文件的按钮       其 代码为: &amp;lt;div class=&quot;control-group&quot;&amp;gt; &amp;lt;label class=&quot;control-label&quot;&amp;gt;上传pdf文件:&amp;lt;/labe...
选择图片后预览(不上传至后台)
这里实现图片预览的最大功臣是FileReader。 FileReader是H5的一个接口 ,和FormData差不多。平常我们是不能直接访问到本地的文件,就算路径是对的也无济于事,但是使用FileReader就可以了。话不多说,直接上代码: 先在HTML 写个样式,大概这样子就行了 HTML代码大概是这样子<div class="form-group col-md-12"> <div