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次遇到这个错误了,但是脑子就是不好用,记不住解决办法啊,每次都要找好久才能找到错误,网上还一篇篇的全是错误答案......所以写篇随笔,记录下,方便大家也方便我自己. 网上有人说是组件循环了 ...
随机推荐
- 微软认证Hyper-V咨询工程师认证课程
课程链接:http://www.microsoftvirtualacademy.com/colleges/hyper-V-Certificate STEP 1:完成课程链接内的认证课程. STEP 2 ...
- const,var,let 区别
js中const,var,let区别 1.const定义的变量不可以修改,而且必须初始化. 声明的是常量 1 const b = 2;//正确 2 // const b;//错误,必须初始化 3 co ...
- Activity全屏沉浸状态
public class MainActivity extends AppCompatActivity { private static final String TAG = "MainAc ...
- jtable的用法
一.创建表格控件的各种方式:1) 调用无参构造函数.JTable table = new JTable();2) 以表头和表数据创建表格.Object[][] cellData = {{" ...
- python简单的购物系统
#coding = utf-8 #2016-11-19#我的工资是存在文件中的,执行后会判断是否存过工资,如果存过无需输入,直接购物,没存过需要输入工资#wages.txt是存工资的文件 import ...
- 前端dom操作竟然使得http请求的时间延长了
最近在项目中遇到了一个奇怪的问题:在google浏览器的调试窗口network下看到一个请求的时间一直是2s多,但是当我把这个请求单独拿出来执行的时候发现根本用不了2s,100多毫秒就完成了.最后再不 ...
- node——进阶版服务器根据不同请求作出不同响应+响应html文件等文件
文件目录结构如下 resource文件里面放了css文件和图片等,view文件里面是html文件 <!DOCTYPE html> <html lang="en"& ...
- (fields.E304) Reverse accessor for 'UserProfile.groups' clashes with reverse accessor for 'User.groups'.
创建数据库models.py,在进行数据迁移时抛出一下异常: E:\Project\GuoJia>python manage.py makemigrations SystemCheckError ...
- 如何使用图形界面Webmin管理linux服务器
出处:http://linux.cn/thread/11992/1/1/ 如何使用图形界面Webmin管理linux服务器 一台典型的linux服务器运行命令行环境中,并已经包括了一些用于安装和配置各 ...
- [读书笔记] R语言实战 (六) 基本图形方法
1. 条形图 barplot() #载入vcd包 library(vcd) #table函数提取各个维度计数 counts <- table(Arthritis$Improved) count ...