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 (/"wW"/.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 "" } } }
原文地址:https://www.cnblogs.com/learnmo/p/6277037.html