- 已编辑
在项目中经常用到input标签来上传文件，而这些文件通常是图片文件。图片有很多格式我们只需要其中的几种，就需要对用户上传的文件进行验证，在HTML5中有一个新的属性：accept文件类型限制。但是通常我们会用javascript或jQuery编写方法进行验证图片的大小限制、类型判断、像素判断。
<input type="file" name="files" id="file" οnchange="verificationPicFile(this)">
1.
//图片类型验证
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;
}
}
//图片大小验证
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.οnlοad=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;
}
}@n0099 请问您设置的参数是多大
已知图片大小是2m
类型不支持哪些未知
像素长宽限制未知
代码我随便偷的 您别吐槽
有无必要部署类似于微信头像这种自动压缩节约服务器空间功能
麻烦你了
