在做图片上传功能的时候,遇到了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的更多相关文章

  1. vue.config.js报错cannot set property "preserveWhitespace" of undefined

    vue.config.js报错cannot set property "preserveWhitespace" of undefined 最近在项目中配置webpack,由于vue ...

  2. 小程序 for循环 报错 Cannot read property 'total' of undefined

    for循环一直报错  Cannot read property 'total' of undefined,但total在起初是有定义的,后来找到了问题,是i<=的问题,改为<不报错了. i ...

  3. 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 ...

  4. echarts js报错 Cannot read property 'getAttribute' of null

    本文将为您描述如何解决 eharts.js报错 Uncaught TypeError: Cannot read property 'getAttribute' of null 的问题 根据报错信息查找 ...

  5. vue项目中使用echarts map报错Cannot read property 'push' of undefined nanhai.js

    在vue中绘制地图需要加载一个本地china.json文件,我用的是get请求的方法加载的,而不是直接import,因为我怕import请求到的部署到线上的时候会有问题.如下是get请求方法: thi ...

  6. echarts报错Cannot read property 'features' of undefined

    引入地图的时候 echarts2报错: Uncaught Error: [MODULE_MISS]"echarts/src/util/mapData/params" is not ...

  7. [Element-UI] 使用Element-UI的DateTimePicker组件报错:Cannot read property 'getHours' of undefined

    使用Element-UI组件的DateTimePicker,如下: <template> <div class="block"> <span clas ...

  8. Vue tools开发工具报错Cannot read property '__VUE_DEVTOOLS_UID__' of undefined

    使用 vue tools 开发工具,不显示调试面板中的组件,点击控制台报错: Cannot read property 'VUE_DEVTOOLS_UID' of undefined 在 main.j ...

  9. 使用vue-preview报错Cannot read property 'open' of undefined

    最近在做一个vue项目中时,需要使用vue-preview插件制作缩略图,首先在终端使用npm i vue-preview -S指令安装了vue-preview插件,然后在main.js中,导入并引用 ...

  10. vue 报错 Cannot read property '__ob__' of undefined的解决方法

    记不清第n次遇到这个错误了,但是脑子就是不好用,记不住解决办法啊,每次都要找好久才能找到错误,网上还一篇篇的全是错误答案......所以写篇随笔,记录下,方便大家也方便我自己. 网上有人说是组件循环了 ...

随机推荐

  1. [实例]ROS使用OpenCV读取图像并发布图像消息在rviz中显示

    思路: (1)使用opencv读取本地图像 (2)调用cv_bridge::CvImage().toImageMsg()将本地图像发送给rviz显示 一.使用opencv读取本地图像并发布图像消息 ( ...

  2. radio判断是否为空

    isMarital = $('[name="isMarital"]:checked').val(); isMarital == null //当radio选择为空的时候 isMar ...

  3. 利用jqueryzoom实现图片放大镜效果

    在你的页面中包含 jqzoom.css <link rel="stylesheet" href="your_path/jqzoom.css" type=& ...

  4. Edge 通过代理无法打开网页,解决方案

    netsh winhttp import proxy source=ie

  5. DB2导出表结构、表数据小结

    一.DB2命令行导出数据库全库表结构 ① Win+R进入到DB2安装目录的BIN目录下,执行命令:DB2CMD,进入到DB2 CLP窗口. 命令:DB2CMD ② 创建一个data文件夹 命令:MKD ...

  6. WCF(三)IIS寄宿

    WCF常用的一种使用方式是寄宿在IIS中. IIS寄宿操作流程如下: 1.创建IIS物理路径对应的文件夹,文件夹名称是WCFIIS. 2.在WCFIIS文件夹中添加文本文件,在文本文件中写入<% ...

  7. stm8s103调试注意点

    外设时钟的配置,有次ADC就是不工作,查问题查了很久,总是怀疑ADC配置问题,然后利用库函数的例程,发现就可以,最后发现,外设时钟没开启,外设时钟如下配置 CLK->PCKENR1 = 0x00 ...

  8. VS运行程序发生栈溢出的分析

    这两天时间都浪费在解决各种栈溢出了,没想到最后各个部件合在一起的时候会出现这么多的问题,这其实是我第一次解决栈溢出问题,很认真的查了查资料,找了几种解决方法,但是作用都不大,拆了东墙补西墙,虽然知道及 ...

  9. div基本组成要素

    title下面先清除固有格式 style{ *{ margin:0 auto padding:0 foant family } } div{ width height border backgroun ...

  10. background--详解(背景图片根据屏幕的自适应)

    background:有以下几种属性: background-color background-position background-size background-repeat backgroun ...