标签:files get return url ++ pre sda 读取 文件类型
在项目中经常用到input标签来上传文件,而这些文件通常是图片文件。图片有很多格式我们只需要其中的几种,就需要对用户上传的文件进行验证,在HTML5中有一个新的属性:accept文件类型限制。但是通常我们会用javascript或jQuery编写方法进行验证图片的大小限制、类型判断、像素判断。
1 <input type="file" name="files" id="file" onchange="verificationPicFile(this)">
1 //图片类型验证 2 function verificationPicFile(file) { 3 var fileTypes = [".jpg", ".png"]; 4 var filePath = file.value; 5 //当括号里面的值为0、空字符、false 、null 、undefined的时候就相当于false 6 if(filePath){ 7 var isNext = false; 8 var fileEnd = filePath.substring(filePath.indexOf(".")); 9 for (var i = 0; i < fileTypes.length; i++) { 10 if (fileTypes[i] == fileEnd) { 11 isNext = true; 12 break; 13 } 14 } 15 if (!isNext){ 16 alert(‘不接受此文件类型‘); 17 file.value = ""; 18 return false; 19 } 20 }else { 21 return false; 22 } 23 }
1 //图片大小验证 2 function verificationPicFile(file) { 3 var fileSize = 0; 4 var fileMaxSize = 1024;//1M 5 var filePath = file.value; 6 if(filePath){ 7 fileSize =file.files[0].size; 8 var size = fileSize / 1024; 9 if (size > fileMaxSize) { 10 alert("文件大小不能大于1M!"); 11 file.value = ""; 12 return false; 13 }else if (size <= 0) { 14 alert("文件大小不能为0M!"); 15 file.value = ""; 16 return false; 17 } 18 }else{ 19 return false; 20 } 21 }
1 //图片尺寸验证 2 function verificationPicFile(file) { 3 var filePath = file.value; 4 if(filePath){ 5 //读取图片数据 6 var filePic = file.files[0]; 7 var reader = new FileReader(); 8 reader.onload = function (e) { 9 var data = e.target.result; 10 //加载图片获取图片真实宽度和高度 11 var image = new Image(); 12 image.onload=function(){ 13 var width = image.width; 14 var height = image.height; 15 if (width == 720 | height == 1280){ 16 alert("文件尺寸符合!"); 17 }else { 18 alert("文件尺寸应为:720*1280!"); 19 file.value = ""; 20 return false; 21 } 22 }; 23 image.src= data; 24 }; 25 reader.readAsDataURL(filePic); 26 }else{ 27 return false; 28 } 29 }
标签:files get return url ++ pre sda 读取 文件类型
原文地址:https://www.cnblogs.com/java-dyb/p/10895517.html