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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM