记一次简单的图片上传验证:
页面:
<input type="file" id="hiddenFile"
onchange="uploadImage(event)"
accept="image/jpg, image/jpeg, image/gif, image/png">立即上传图片
js:
function uploadImage(e) {
//图片的提前校验,如果返回false,则代表校验不成功
if(!preSubmitFileCheck(e)){
console.info("验证失败,显示提示框");
return;
}
//后面就是调用ajax,将图片传到后台的图片服务器或者文件服务器
//然后ajax返回图片上传后的路径,
//最后在页面渲染,供用户点击查看.
}
//ie浏览器必须是图片的后缀,非ie还会校验图片大小,不能超过5兆
function preSubmitFileCheck(e){
var fileTypes =["jpeg","jpg","png","gif"];
if(window.navigator.userAgent.indexOf("MSIE")>=1){
//ie浏览器
//只看后缀是不是给定的四种,不是就不通过
//ie暂时还没有获得文件大小的合适方法,欢迎前端大神在评论区补充
var filePath = document.selection.createRange().text;
var type = filePath.substring(filePath.lastIndexOf('.') + 1);
for (var i = 0; i < fileTypes.length; i++) {
if (fileTypes[i] == type) {
typeFlag = true;
break;
}
}
if (!typeFlag) {
alert("上传格式不符,请重新上传!");
return false;
}
}else{
//非ie浏览器
var files = e.target.files, fs = files.length, s = 0;
for (var i = 0; i < fs; i++) {
var name = files[i].name;
console.log("图片大小:size:"+files[i].size)
if(files[i].size > 5*1024*1024){
//对图片大小限制,大于5兆也不行
sizeFlag = true;
}
var type = name.substring(name.lastIndexOf('.') + 1);
typeFlag = false;
for (var j = 0; j < fileTypes.length; j++) {
if (fileTypes[j] == type) {
typeFlag = true;
break;
}
}
if (!typeFlag || sizeFlag) {
alert("上传格式不符,请重新上传!");
}
}
}
//到这里代表校验通过了
return true;
}