JS报错:Cannot read property 'type' of undefined
在做图片上传功能的时候,遇到了JS无法识别图片type的问题,在使用过程中是没有问题的,但是不知道为什么浏览器的Console报这个错误:
Uncaught TypeError: Cannot read property 'type' of undefined
    at Function.$.ImgSrc (ModelUpload.do:18)
    at uploadImg (ModelUpload.do:77)
    at HTMLInputElement.onchange (ModelUpload.do:110)
    
alert下面JS代码中的file[i].type的时候显示的是img/jpeg why???
页面相关代码如下:
HTML:
        <p>
            <label for="picFileId">缩略图文件:</label> <input id="picFileId"
                name="picFileId" type="file" onchange="uploadImg()" />
        <fieldset>
            <div style="position: relative;" id="fileImg"></div>
            <legend>图片显示区域</legend>
        </fieldset>
        <p>
JS:
<script type="text/javascript">
    $.ImgSrc = function(file, id) {
        for (var i = 0; i < 3; i++) {
            alert(file[i].type);
            if (!/image\/\w+/.test(file[i].type)) {
                alert("请选择图片文件");
                return false;
            }
            ;
            if (file[i].size > 2048 * 1024) {
                alert("图片不能大于2M")
                ClearImg();
                continue;
            }
            ;
            var img;
            console.log(document.getElementById("fileImg"));
            console.log(file[i]);
            console.log("file-size=" + file[i].size);
            var reader = new FileReader();
            reader.onloadstart = function(e) {
                console.log("开始读取....");
            }
            reader.onprogress = function(e) {
                console.log("正在读取中....");
            }
            reader.onabort = function(e) {
                console.log("中断读取....");
            }
            reader.onerror = function(e) {
                console.log("读取异常....");
            }
            reader.onload = function(e) {
                console.log("成功读取....");
                var div = document.createElement("div"); //外层 div
                div
                        .setAttribute(
                                "style",
                                "position:relative;width:inherit;height:inherit;float:left;z-index:2;width:150px;margin-left:8px;margin-right:8px;");
                var del = document.createElement("div"); //删除按钮div
                del
                        .setAttribute(
                                "style",
                                "position: absolute; bottom: 4px; right: 0px; z-index: 99; width: 30px; height:30px;border-radius:50%;")
                var delicon = document.createElement("img");
                delicon.setAttribute("src", "images/shanchu.png");
                delicon.setAttribute("title", "删除");
                delicon.setAttribute("style",
                        "cursor:pointer;width: 30px; height:30px");
                del.onclick = function() {
                    this.parentNode.parentNode.removeChild(this.parentElement);
                    ClearImg();
                };
                del.appendChild(delicon);
                div.appendChild(del);
                var imgs = document.createElement("img"); //上传的图片
                imgs.setAttribute("name", "loadimgs");
                imgs.setAttribute("src", e.target.result);
                imgs.setAttribute("width", 150);
                //childNodes.length > 0  代表 最多传一张,再上传,就把前面的替换掉
                if (document.getElementById(id).childNodes.length > 0) {
                    document.getElementById(id).removeChild(
                            document.getElementById(id).firstChild);
                }
                div.appendChild(imgs)
                document.getElementById(id).appendChild(div);
            }
            reader.readAsDataURL(file[i]);
        }
    }
    function uploadImg() {
        $.ImgSrc(document.getElementById("picFileId").files, "fileImg");
    }
    function ClearImg() {
        var file = $("#picFileId")
        file.after(file.clone().val(""));
        file.remove();
    }
</script>JS报错:Cannot read property 'type' of undefined >> java
这个答案描述的挺清楚的:
http://www.goodpm.net/postreply/java/1010000008888543/JS报错Cannotreadpropertytypeofundefined.html
JS报错:Cannot read property 'type' of undefined的更多相关文章
- vue.config.js报错cannot set property "preserveWhitespace" of undefined
		vue.config.js报错cannot set property "preserveWhitespace" of undefined 最近在项目中配置webpack,由于vue ... 
- 小程序 for循环 报错 Cannot read property 'total' of undefined
		for循环一直报错 Cannot read property 'total' of undefined,但total在起初是有定义的,后来找到了问题,是i<=的问题,改为<不报错了. i ... 
- datatables 多一列报错Cannot read property 'sWidth' of undefined(…)/少一列报错Cannot read property 'style' of undefined(…)
		datatables 多一列报错Cannot read property 'sWidth' of undefined(…)/少一列报错Cannot read property 'style' of u ... 
- echarts js报错 Cannot read property 'getAttribute' of null
		本文将为您描述如何解决 eharts.js报错 Uncaught TypeError: Cannot read property 'getAttribute' of null 的问题 根据报错信息查找 ... 
- vue项目中使用echarts map报错Cannot read property 'push' of undefined  nanhai.js
		在vue中绘制地图需要加载一个本地china.json文件,我用的是get请求的方法加载的,而不是直接import,因为我怕import请求到的部署到线上的时候会有问题.如下是get请求方法: thi ... 
- echarts报错Cannot read property 'features' of undefined
		引入地图的时候 echarts2报错: Uncaught Error: [MODULE_MISS]"echarts/src/util/mapData/params" is not ... 
- [Element-UI] 使用Element-UI的DateTimePicker组件报错:Cannot read property 'getHours' of undefined
		使用Element-UI组件的DateTimePicker,如下: <template> <div class="block"> <span clas ... 
- Vue tools开发工具报错Cannot read property '__VUE_DEVTOOLS_UID__' of undefined
		使用 vue tools 开发工具,不显示调试面板中的组件,点击控制台报错: Cannot read property 'VUE_DEVTOOLS_UID' of undefined 在 main.j ... 
- 使用vue-preview报错Cannot read property 'open' of undefined
		最近在做一个vue项目中时,需要使用vue-preview插件制作缩略图,首先在终端使用npm i vue-preview -S指令安装了vue-preview插件,然后在main.js中,导入并引用 ... 
- vue 报错 Cannot read property '__ob__' of undefined的解决方法
		记不清第n次遇到这个错误了,但是脑子就是不好用,记不住解决办法啊,每次都要找好久才能找到错误,网上还一篇篇的全是错误答案......所以写篇随笔,记录下,方便大家也方便我自己. 网上有人说是组件循环了 ... 
随机推荐
- java实现sql批量插入参数
			背景: 需要更新一些不规范的时间格式,如将某个时间格式化为yy-MM-dd,实际上为 yy-MM-dd hh:mm:ss,并且需要提供回滚脚本. 例如:规范化时间的脚本如下: ,) WHERE tes ... 
- HD-ACM算法专攻系列(23)——Crixalis's Equipment
			题目描述: AC源码:此次考察贪心算法,解题思路:贪心的原则是使留下的空间最大,优先选择Bi与Ai差值最大的,至于为什么?这里用只有2个设备为例,(A1,B1)与(A2,B2),假设先搬运A1,搬运的 ... 
- P3图片导致iOS9.3以下崩溃问题
			如果你刚刚升级了Xcode8,而你的项目的Deployment Target是iOS 9.3以下,运行iOS8的时候过了几十秒后crash到main函数,出现EXC_BAD_ACCESS,或者崩溃到i ... 
- ZBrush中Nudge推动笔刷介绍
			本文我们来介绍Nudge推动笔刷,该笔刷在使用时能够产生旋转涂抹的效果,Nudge笔刷允许您在模型表面移动顶点,而这些移动的顶点仍然停留在模型的原来的表面,它与Move笔刷还是不同的,利用Move笔刷 ... 
- EFCore笔记之查询数据
			查询数据 基础查询,Linq100实例: https://code.msdn.microsoft.com/101-LINQ-Samples-3fb9811b using (var context = ... 
- Kattis - bela
			Bela Young Mirko is a smart, but mischievous boy who often wanders around parks looking for new idea ... 
- mybatis中if及concat函数的使用
- selenium chrome.options禁止加载图片和js
			#新建一个选项卡 from selenium import webdriver options = webdriver.ChromeOptions() #禁止加载图片 prefs = { 'profi ... 
- MVC、RPC、SOA、微服务架构之间的区别
			MVC.RPC.SOA.微服务架构之间的区别 一.MVC架构 其实MVC架构就是一个单体架构. 代表技术:Struts2.springMVC.Spring.Mybatis 等等. 二.RPC架构 RP ... 
- React入门基础
			1-react概念: React是一个用于构建用户界面的JavaScript库.React主要用于构建UI,很多人认为React是MVC中的V(视图).React起源于Facebook的内部项目.Re ... 
