在做图片上传功能的时候,遇到了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. 利用keytool颁发https证书方法

    1.首先生成私有认证机构 命令:keytool -genkeypair -alias CAname   补充:keytool -list 命令增加 -v 可以查看CA详细信息 2.然后生成私有证书 命 ...

  2. Windows 10 游戏录制工具栏

  3. datatable.rows.indexof(dr)返回的是啥?

    返回的是Int类型的 行索引值,从0开始.也就是说,第一行是0.最后一行就是rows.count - 1.不会返回-1."这是第" + OldDt.Rows.IndexOf(ite ...

  4. SQL的where执行顺序

    SQL的where执行顺序 1 mysql 从左到右. 一个原则,排除越多的条件放到第一个 例子:抄的. SELECT … WHERE p.languages_id = 1 AND m.languag ...

  5. [oracle] 组织架构退格显示 connect by

    1. 按组织架构关系退格显示 create or replace view v_vieworg asselect --v.OBJID,v.OBJNAMElevel as levelid, lpad(' ...

  6. Win8 Windows Defender default behaviour

    Problem Description ********************* Is it possible, to change the default behaviour when findi ...

  7. POJ.grids.2980

    题目链接:http://bailian.openjudge.cn/practice/2980 解题思路:先将对应位相乘的积累加,最后再来处理进位问题:如 835*49: 先做 835*9: 得到 i  ...

  8. thinkphp5 模板中截取中文字符串

    TP5模板页截取中文字符串 {$vo.task_detail|mb_substr=###,0,15,'utf-8'}

  9. GCD与dispatch_group总结

    GCD 可以看作是集合类的操作: 集合是queue,元素是block: 集合只能添加对象,删除对象由系统完成. 同理,NSOperationQueue也可以看作是一个集合管理器. dispatch_g ...

  10. 路飞学城Python-Day42

    前端                                                                                                  ...