<input type = file/>上传图片限制大小、类型判断、像素判断
在项目中经常用到input标签来上传文件，而这些文件通常是图片文件。图片有很多格式我们只需要其中的几种，就需要对用户上传的文件进行验证，在HTML5中有一个新的属性：accept文件类型限制。但是通常我们会用javascript或jQuery编写方法进行验证图片的大小限制、类型判断、像素判断
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<script type="text/javascript"> ???????????//图片类型验证 ???????????function verificationPicFile(file) { ???????????????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; ???????????????????????????break; ???????????????????????} ???????????????????} ???????????????????if (!isNext){ ???????????????????????alert(‘不接受此文件类型‘); ???????????????????????file.value = ""; ???????????????????????return false; ???????????????????} ???????????????}else { ???????????????????return 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 = ""; ???????????????????????return false; ???????????????????}else if (size <= 0) { ???????????????????????alert("文件大小不能为0M！"); ???????????????????????file.value = ""; ???????????????????????return false; ???????????????????} ???????????????}else{ ???????????????????return false; ???????????????} ???????????}// ???????????//图片大小验证// ???????????function verificationPicFile(file) {// ???????????????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 = "";// ???????????????????????return false;// ???????????????????}else if (size <= 0) {// ???????????????????????alert("文件大小不能为0M！");// ???????????????????????file.value = "";// ???????????????????????return false;// ???????????????????}// ???????????????}else{// ???????????????????return false;// ???????????????}// ???????????}//图片尺寸验证//function verificationPicFile(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 == 720 | height == 1280){// ?????????????????alert("文件尺寸符合！");// ?????????????}else {// ?????????????????alert("文件尺寸应为：720*1280！");// ?????????????????file.value = "";// ?????????????????return false;// ?????????????}// ?????????};// ?????????image.src= data;// ?????};// ?????reader.readAsDataURL(filePic);// ?}else{// ?????return false;// ?}//} ???????</script> ???</head> ???<body> ???????<input type="file" name="files" id="file" onchange="verificationPicFile(this)"> ???</body></html><input type = file/>上传图片限制大小、类型判断、像素判断
原文地址：https://www.cnblogs.com/llhWeb/p/9771072.html