javascript上传图片限制图片大小及格式

java

发布日期: 2019-06-16

文章字数: 652

阅读时长: 3 分

阅读次数:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript上传图片限制图片大小及格式</title>
<script type="text/javascript">
// 图片类型验证
function verificationPicFileType(file) { 
   var flag=false;
    var fileTypes = [".jpg", ".png"];  
    var filePath = file.value;  
    //当括号里面的值为0、空字符、false 、null 、undefined的时候就相当于false  
    if(filePath){  
        var isNext = false;  
        var fileEnd = filePath.substring(filePath.indexOf("."));  
        for (var i = 0; i < fileTypes.length; i++) {  
            if (fileTypes[i] == fileEnd) {  
                isNext = true;
                flag= true;
                break;  
            }  
        }  
        if (!isNext){  
            alert('不接受此文件类型，请上传jpg或png格式文件');  
            file.value = "";  
            flag=false;  
        }  
    }
    return flag;
}
//图片大小验证  
function verificationPicFileSize(file) { 
	var flag=false;
    var fileSize = 0;  
    var fileMaxSize = 1024;//1M  
    var filePath = file.value;  
    if(filePath){  
        fileSize =file.files[0].size;  
        var size = fileSize / 1024;  
        if (size > fileMaxSize) {  
            alert("文件大小不能大于1M！");  
            file.value = "";  
            flag=false;  
        }else if (size <= 0) {  
            alert("文件大小不能为0M！");  
            file.value = "";  
            flag=false;  
        }else{
        	flag=true;
        }  
    }
    return flag;
}
//图片尺寸验证  
function verificationPicFileMeasure(file) {  
    var filePath = file.value;  
    if(filePath){  
        //读取图片数据  
        var filePic = file.files[0];  
        var reader = new FileReader();  
        reader.onload = function (e) {  
            var data = e.target.result;  
            //加载图片获取图片真实宽度和高度  
            var image = new Image();  
            image.onload=function(){  
                var width = image.width;  
                var height = image.height;  
                if (width == 132 | height == 132){  
                    alert("文件尺寸符合！");  
                }else {  
                    alert("文件尺寸应为：132*132！");  
                    file.value = "";  
                    return false;  
                }  
            };  
            image.src= data;  
        };  
        reader.readAsDataURL(filePic);  
    }else{  
        return false;  
    }  
}
//图片验证  
function checkFile(file) { 
   debugger;
	//文件为空判断
	if (file === null || file === undefined) {
		alert("请选择您要上传的文件！");
		$$("btnSelect").innerHTML = "单击选择要上传的照片";
		return false;
	}
  var  typeFlag=verificationPicFileType(file);
  var  sizeFlage=verificationPicFileSize(file);
  var  gs = verificationPicFileMeasure(file);
  if(true==typeFlag && true==sizeFlage && true == gs ){
	//添加预览图片
     document.getElementById('btnSelect').innerHTML = "<img class=\"photo\" src=\""+createObjectURL(file)+"\"/>";
		
	 return true;
  }else{
	  return false;
  }
   
}

//获取数据的URL地址
function createObjectURL(blob) {
	if (window.URL) {
		return window.URL.createObjectURL(blob);
	} else if (window.webkitURL) {
		return window.webkitURL.createObjectURL(blob);
	} else {
		return null;
	}
}

</script>
</head>
<body>
	<br />
	<form>
		<div id="wp" class="warpper">            
            <a id="btnSelect">单击选择要上传的照片</a>
			<br />
            <input id="uploadFile" type="file" name="myPhoto" onchange="checkFile(this)" />    
			<div id="maskLayer" class="mask-layer" style="display:none;">
				<p>图片正在上传中...</p>
			</div>			
		</div>
	</form>

</body>
</html>