<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>
原文地址：https://www.cnblogs.com/llhWeb/p/9771072.html
时间： 2024-10-08 17:02:09