js驗證圖片上傳大小，格式以及寬高

html代碼

<input type="file" name="file" id="file"  onchange="ajaxFileUpload(this)"/>
<img id="loginImg" src="" />

 

javascript代碼

　　由於高級瀏覽器對上傳圖片路徑進行了加密，圖片在頁面不能正常顯示，在這里我們可以將圖片轉換成base64格式的路徑就可以了。

function ajaxFileUpload(obj){
    var path,clip = $("#loginImg"),FileReader = window.FileReader;
    if (FileReader) {//chrome
        var reader = new FileReader(),
            file = obj.files[0];
        reader.onload = function(e) {
            var str=e.target.result;
            var str1=str.split(";");
            var str2=str1[0].split("/");
            clip.attr("src", e.target.result);
            clip.attr("data-type", str2[1]);　　//獲取圖片的格式
            if (limitImg('loginImg', 999, false, 1920, 1080) == ""||limitImg('loginImg', 999, false, 1920, 1080)==undefined) {
                 alert(limitImg('imgId',999,false,1920,1080))
            } else {
                 alert(limitImg('imgId', 999, false, 1920, 1080))
            }
        };
        reader.readAsDataURL(file);
    }
    else {
        path = $(this).val();
        if (/"\w\W"/.test(path)) {
            path = path.slice(1,-1);
        }
        clip.attr("src",path);
    } 
}

function limitImg() {
    var img = document.getElementById(arguments[0]); //顯示圖片的對象
    var maxSize = arguments[1]; //圖片的大小
    var allowGIF = arguments[2] || false;
    var maxWidth = arguments[3] || 0;
    var maxHeight = arguments[4] || 0;
    var postfix = img.getAttribute("data-type");
    var str = "jpeg";
　　
    if (str.indexOf(postfix.toLowerCase()) == -1) {
        if (allowGIF) {
            return "圖片格式不對，只能上傳jpg或gif圖像";
        } else {
            return "圖片格式不對，只能上傳jpg圖像";
        }
    }
    if (img.fileSize > maxSize * 1024) {
        return "圖片大小超過限制,請限制在" + maxSize + "K以內";
    }
    if (img.fileSize == -1) {
        return "圖片格式錯誤，可能是已經損壞或者更改擴展名導致，請重新選擇一張圖片";
    } else {
        if (maxWidth > 0) {
            if (img.width > maxWidth) {
                return "圖片寬度超過限制，請保持在" + maxWidth + "像素內";
            } 
            if (img.height > maxHeight) {  
                return "圖片高度超過限制，請保持在" + maxHeight + "像素內";
            } 
　　　　　　　//萬惡的需求，還沒見過這么上傳圖片的呢
            if(img.width%4 != 0){
                return "圖片寬度必須為4的整數倍";
            }
            if(img.height%4 != 0){
                return "圖片高度必須為4的整數倍";
            }
        }else{
            return ""
        }
    }
}