在做图片上传功能的时候,遇到了JS无法识别图片type的问题,在使用过程中是没有问题的,但是不知道为什么浏览器的Console报这个错误:

Uncaught TypeError: Cannot read property 'type' of undefinedat 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"); //外层 divdiv.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"); //删除按钮divdel.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

转载于:https://www.cnblogs.com/scrumme/p/7668812.html

JS报错:Cannot read property 'type' of undefined相关推荐

  1. vue echarts使用map地图 引入china.js报错Cannot read property ‘echarts’ of undefined

    下载china.js导入项目中引入,会报错Cannot read property 'echarts' of undefined import Echarts from "echarts&q ...

  2. js报错- cannot set property xxx of undefined

    case1 报错代码 quizList[index] = currentQuiz; quizList[index].learningItem = item; 报错内容 Cannot read prop ...

  3. 事件监听一直报错Cannot set property 'display' of undefined

    为什么80%的码农都做不了架构师?>>>    css ↓ .wechatBtn {position: relative;} .wechat {position: absolute; ...

  4. DateTimePicker 日期时间选择器报错 Cannot read property ‘getHours‘ of undefined, 无法选中`[__ob_: observer__]`时做判断

    我在一次开发中遇到了这个情况:使用DateTimePicker 日期时间选择器,出现无法选中, 报错 Cannot read property 'getHours' of undefined, 这个原 ...

  5. Vue开启Gzip打包异常:webpack打包报错Cannot read property ‘emit‘ of undefined

    Vue开启Gzip打包异常:webpack打包报错Cannot read property 'emit' of undefined 相关代码 const CompressionPlugin = req ...

  6. vue 报错 Cannot read property ‘__ob__‘ of undefined的解决方法

    vue 报错 Cannot read property '__ob__' of undefined的解决方法 参考文章: (1)vue 报错 Cannot read property '__ob__' ...

  7. uniapp 小程序报错 Cannot read property ‘forceUpdate‘ of undefined

    uniapp 小程序报错 Cannot read property 'forceUpdate' of undefined 1.问题: 解决:配置小程序的ID manifest.json的文件

  8. 微信小程序接入百度统计报错 Cannot read property ‘mtj‘ of undefined

    参考文章微信小程序如何接入百度统计并且自定义事件分析_improvement-CSDN博客_百度统计 自定义事件 接入百度统计,遇到了几个坑 1.第一个坑--微信小程序后台配置了https://hmm ...

  9. vue 报错 Cannot read property ‘_wrapper‘ of undefined

    vue项目中,使用了各种插件和ui库,有时候会出现 Cannot read property '_wrapper' of undefined  这样的报错,一开始还以为是引用的插件报错, 其实是自定义 ...

  10. cesium CLAMP_TO_GROUND 报错 Cannot read property ‘globe‘ of undefined

    billboardCollection 需要添加heightReference: Cesium.HeightReference.CLAMP_TO_GROUND var viewer = new Ces ...

最新文章

  1. Science:若DTC基因检测达2%成年人群,几乎所有人的身份或将无所遁形
  2. 计算机处理信息的方式
  3. poj1664(放苹果)
  4. Android Studio 2.1.2 升级到 2.2之后,gradle 编译版本更新为2.2.0,databinding报错
  5. Apache Flink ML 2.0.0 发布公告
  6. 提高电脑反应速度_大家都能看懂的电脑内存条挑选技巧,电脑的内存条就应该这样选!...
  7. sql:除非另外还指定了 TOP 或 FOR XML,否则,ORDER BY 子句在视图、内联函数、派生表、子查询
  8. URAL 1732. Ministry of Truth ( KMP 多模式串匹配 )
  9. 100道Python练习题集合,拿去刷
  10. win10设置HTML桌面背景,Win10系统直接将视频设置为桌面背景的方法
  11. android硬盘加密方法,Android硬盘加密工具
  12. AUTOCAD——Measregeom测量工具
  13. mysql怎么删除临时表里的数据_MySQL如何创建和删除临时表 | 学步园
  14. Asp.net MVC 填充word并下载
  15. 丢失MSVCR120.dll
  16. Vista硬盘安装详细图解
  17. 尝鲜云端地图服务 Azure Location Based Service Preview
  18. 小程序+spring boot校园交友平台毕业设计-附源码191733
  19. 美国医生谈医疗创业公司的五大成功要素:简化流程、绩效工资、授权
  20. 基于Python的中国影业数据分析

热门文章

  1. ARM处理器详解(2)-Cortex R系列
  2. js 的prototype 属性和用法,外加__proto__
  3. termux 开启 sshd
  4. ARM Cotex-M4数据手册4---System Control
  5. [0002] Hadoop HDFS cmd常用命令练手
  6. 使用jsonEditor打造一个复杂json编辑器
  7. Idea 创建 web.xml 文件
  8. SpringBoot集成Cache缓存(Ehcache缓存框架,注解方式)
  9. Windows下安装配置Maven
  10. 设计模式之不简单的工厂模式(一)