js上传图片进行预览、验证格式及尺寸

<script type="text/javascript">
var flag = 0;
/**
 * 校验表单
 */
function checkForm(){
	var idcard =document.getElementById("servertypename").value;
	var fileName = $('#uploadPath').val();
	var check_flag = false;
	if(idcard==""){
		alert("类型名称不能为空！");
	}else if(fileName==""){
		alert("请上传图标！");
	}else {
		if(flag==1)
			alert("您只能输入GIF,BMP,PNG,JPG,JPEG格式的文件");
		else if(flag==2)
			alert("请上传尺寸为120*120的图片！");
		else
			check_flag = true;
	}
	return check_flag;
};
/**
 * 预览图片
 */
function previewImage(file, url) {
	var MAXWIDTH = 120;
    var MAXHEIGHT = 120;
    if (file.files && file.files[0]) {
        var img = document.getElementById(url);
        img.onload = function() {
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            img.width = rect.width;
            img.height = rect.height;
            img.style.marginTop = rect.top + 'px';
        };
        var reader = new FileReader();
        reader.onload = function(evt) {
            img.src = evt.target.result;
        };
        reader.readAsDataURL(file.files[0]);
    } else {
        file.select();
    }
    getImageSize(document.getElementById("uploadPath"));
};
/**
 * 压缩图片
 */
function clacImgZoomParam(maxWidth, maxHeight, width, height) {
    var param = {
        width: width,
        height: height
    };
    if (width > maxWidth || height > maxHeight) {
        rateWidth = width / maxWidth;
        rateHeight = height / maxHeight;
        if (rateWidth > rateHeight) {
            param.width = maxWidth;
            param.height = Math.round(height / rateWidth);
        } else {
            param.width = Math.round(width / rateHeight);
            param.height = maxHeight;
        }
    }
    return param;
};
/**
 * 校验图片尺寸
 */
function getImageSize(obj) {
    var _file = document.getElementById("uploadPath");
    var i = _file.value.lastIndexOf('.');
    var len = _file.value.length;
    var extEndName = _file.value.substring(i + 1, len);
    var extName = "GIF,BMP,PNG,JPG,JPEG";
    if (extName.indexOf(extEndName.toUpperCase()) == -1) {
        alert("您只能输入" + extName + "格式的文件");
        flag = 1;
    } else {
        var url, image;
        if (obj.files) {
            if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
                obj.select();
                url = document.selection.createRange().text;
            }
            url = window.URL.createObjectURL(obj.files[0]);
        } else {
            url = obj.value;
            url = "file:///" + url;
        }
        image = new Image();
        image.src = url;
        image.onload = function() {
            if (image.width != 120 || image.height != 120) {
                alert("请上传尺寸为120*120的图片！");
                flag = 2;
            }else{
            	flag = 0;
            }
        };
    }
};
</script>

预览图片及上传按钮：

<img src="<%=path%>/images/alum_def_img.jpg" name="img" id="img" width="60px;" height="60px;" align="center" style="margin-top: 5px; margin-bottom: 5px;"/>
<input type="file" class="file" id="uploadPath" name="uploadPath" accept="image/gif,image/png,image/bmp,image/jpeg" οnchange="previewImage(this,'img')" />

提交表单：

<input type="submit" name="submit" οnclick="javascript:return checkForm();" value="提交" style="font-size:16px;width:45px;height:28px;background:#aae3fc;" />