当前位置: 首页 > news >正文

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

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

相关文章:

  • Rac修改IP(不同网段)的方法步骤
  • Java 8 Distinct by property
  • [译] Swift 中关于并发的一切:第一部分 — 当前
  • js的属性事件
  • 网络请求框架 Retrofit 2 使用入门
  • cpu,io密集型计算概念
  • ubuntu 安装dlib 出现dlib.so: undefined symbol: png_set_longjmp_fn
  • 第三讲课后作业1
  • 购物车优化
  • 《用数据讲故事》作者Cole N. Knaflic:消除一切无效的图表
  • spring mvc 配置文件加载
  • 用canvas实现一个colorpicker
  • JDK8新特性(2):Stream API常用操作
  • BZOJ 2457 [BeiJing2011] 双端队列
  • 如何用TensorFlow生成令人惊艳的分形图案
  • 【JavaScript】通过闭包创建具有私有属性的实例对象
  • AHK 中 = 和 == 等比较运算符的用法
  • JS专题之继承
  • Linux后台研发超实用命令总结
  • Making An Indicator With Pure CSS
  • MD5加密原理解析及OC版原理实现
  • MySQL几个简单SQL的优化
  • Nodejs和JavaWeb协助开发
  • PermissionScope Swift4 兼容问题
  • Service Worker
  • Solarized Scheme
  • SSH 免密登录
  • 大主子表关联的性能优化方法
  • 检测对象或数组
  • 离散点最小(凸)包围边界查找
  • 删除表内多余的重复数据
  • 小程序上传图片到七牛云(支持多张上传,预览,删除)
  • 在GitHub多个账号上使用不同的SSH的配置方法
  • LevelDB 入门 —— 全面了解 LevelDB 的功能特性
  • Spring第一个helloWorld
  • ​低代码平台的核心价值与优势
  • # 飞书APP集成平台-数字化落地
  • ###项目技术发展史
  • #if 1...#endif
  • %check_box% in rails :coditions={:has_many , :through}
  • (C语言)深入理解指针2之野指针与传值与传址与assert断言
  • (Redis使用系列) SpirngBoot中关于Redis的值的各种方式的存储与取出 三
  • (八)Flask之app.route装饰器函数的参数
  • (办公)springboot配置aop处理请求.
  • (二)什么是Vite——Vite 和 Webpack 区别(冷启动)
  • (附源码)ssm高校升本考试管理系统 毕业设计 201631
  • (附源码)ssm经济信息门户网站 毕业设计 141634
  • (免费领源码)Python#MySQL图书馆管理系统071718-计算机毕业设计项目选题推荐
  • (删)Java线程同步实现一:synchronzied和wait()/notify()
  • (使用vite搭建vue3项目(vite + vue3 + vue router + pinia + element plus))
  • (一)80c52学习之旅-起始篇
  • ***php进行支付宝开发中return_url和notify_url的区别分析
  • .bat批处理(四):路径相关%cd%和%~dp0的区别
  • .md即markdown文件的基本常用编写语法
  • .NET Remoting Basic(10)-创建不同宿主的客户端与服务器端