码迷,mamicode.com
首页 > Web开发 > 详细

上传图片限制大小、类型判断、像素判断

时间:2019-05-20 19:16:42      阅读:138      评论:0      收藏:0      [点我收藏+]

标签: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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!