在做图片上传功能的时候,遇到了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. POJ 1384 Piggy-Bank DP

    一个完全背包 很裸,对于我这种DP渣渣都能1A.. // by SiriusRen #include <cstdio> #include <cstring> #include ...

  2. 移动端 华为手机 input中placeholder垂直居中失效

    为一个app写了一个嵌套的提现页面,效果如下图 input给定宽高,给了line-heigh,在浏览器查看效果正常,placeholder内容以及光标显示都是垂直居中的, IOS显示正常, Andro ...

  3. CPU VS GPU

    CPU VS GPU 关于绘图和动画有两种处理的方式:CPU(中央处理器)和GPU(图形处理器).在现代iOS设备中,都有可以运行不同软件的可编程芯片,但是由于历史原因,我们可以说CPU所做的工作都在 ...

  4. vue调试工具vue-devtools的安装

    一.可以在chrome商店中下载安装,当然需要FQ哈,你懂得~: 二.手动安装: 1.将github上项目文件克隆到本地,https://github.com/vuejs/vue-devtools: ...

  5. 设置PATH 环境变量、pyw格式、命令行运行python程序与多重剪贴板

    pyw格式简介: 与py类似,我认为他们俩卫衣的不同就是前者运行时候不显示终端窗口,后者显示 命令行运行python程序: 在我学习python的过程中我通常使用IDLE来运行程序,这一步骤太过繁琐( ...

  6. django-10-中间件和上下文管理器

    <<<中间件的引入>>> 用户<->中间件<->url->视图  在app目录里面 middleware.py  (1)中间件就是一个 ...

  7. spring mvc 下载的时候中文文件名不显示

    Headers.add("Content-Disposition", "attachment;filename=" + new String(file.getB ...

  8. VUE:UI组件库(Mint UI & Elment)

    VUE:UI组件库 常用 1)Mini UI: a 主页:http://mint-ui.github.io/#!/zh-cn b 说明:饿了么开源的基于vue的移动端UI组件库 2)Elment a ...

  9. poi API大全

    一. POI简介 Apache POI是Apache软件基金会的开放源码函式库,POI提供API给Java程序对Microsoft Office格式档案读和写的功能. 二. HSSF概况 HSSF 是 ...

  10. Mysql学习总结(30)——MySQL 索引详解大全

    什么是索引? 1.索引 索引是表的目录,在查找内容之前可以先在目录中查找索引位置,以此快速定位查询数据.对于索引,会保存在额外的文件中. 索引,是数据库中专门用于帮助用户快速查询数据的一种数据结构.类 ...