检验上传图片大小、尺寸、类型的两种实现方案

做图片上传功能时,我们经常会遇到一个问题就是,就是要对上传的图片进行一个校验,校验的东西包括图片的大小、尺寸(即宽和高)以及图片的类型。

今天我主要介绍两种方式来进行图片的校验,一种是在前端用js校验,另一种是放在服务器端校验。接下来我们来进行介绍

第一种:放在前端用js校验

下面直接贴源代码,注释也写在代码里面

 1 <%@ page language="java" contenttype="text/html; charset=UTF-8" pageencoding="UTF-8"%>
 2 <%@ include file="../common/common_tags.jsp" %>
 3 <!DOCTYPE html>
 4 <html lang="en">
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 7 <title>素材列表&gt;图片编辑</title>
 8 </head>
 9 <body>
10 <form action="${path}/materialImage/update.do" method="post">
11     <input type="file" id="sdfile" name="sdfile" onchange="preImg(this.id,‘preview_2‘);">
12 </form>
13 <div id="tip1">
14 </div>
15 <div id="tip2">
16 </div>
17 <script>
18 /**图片的大小要求,不超过80KB,单位是KB*/
19 var size = "80";
20 /**图片的类型要求(即文件后缀)*/
21 var suffix = "jpg,png";
22 /**图片宽高要求,单位是px*/
23 var width = "640";
24 var height = "530";
25 var suffixList ="";
26 function preImg(fileid, previewid)
27 {
28     var name = document.getElementById(fileid).files[0].name;
29     var curSize = document.getElementById(fileid).files[0].size;
30     var curSuffix = name.split(".")[1];
31     console.info(document.getElementById(fileid).files[0])
32     //1、判断图片大小
33     if(curSize>size*1024)
34     {
35         alert("图片大小不能超过"+size+"KB!");
36         return;
37     }
38     //2、判断图片类型
39     if(suffix.indexOf(curSuffix)==-1)
40     {
41         suffixList="图片只能以";
42         for(var j=0;j<suffix.split(",").length;j++)
43         {
44             if(j==0)
45             {
46                 suffixList+="."+suffix.split(",")[j];
47             }
48             else
49             {
50                 suffixList+="或."+suffix.split(",")[j];
51             }
52         }
53         suffixList+="结尾!"
54         alert(suffixList+"");
55         return;
56     }
57     /*
58    3、 判断图片的尺寸(即宽和高)
59       现在的问题是,如何读取图片的宽、高
60       我这里是通过实例化Image对象、加载src 来获取。
61     */
62     var reader = new FileReader();
63     var picpreview = document.getElementById(previewid);
64     reader.onload = function(e) {
65         var data = e.target.result;
66         //加载图片获取图片真实宽度和高度
67         var image = new Image();
68         image.onload=function(){
69             var w = image.width;
70             var h = image.height;
71             if(w!=width || h!=height)
72             {
73                 alert("请上传尺寸为尺寸为"+width+"x"+height"的图片,当前图片尺寸为"+w+"x"+h+"!");
74                 return;
75             }
76         }
77         image.src= data;
78         picpreview.innerHTML = "<img src=‘"+this.result+"‘ class=‘‘ style=‘height: 282px;‘ />";
79     }
80     reader.readAsDataURL(document.getElementById(fileid).files[0]);
81 }
82 </script>

第二种:放到服务器端校验

首先看用到jsp页面是如下

 1 <%@ page language="java" contenttype="text/html; charset=UTF-8" pageencoding="UTF-8"%>
 2 <%@ include file="../common/common_tags.jsp" %>
 3 <!DOCTYPE html>
 4 <html lang="en">
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 7 <title>素材列表&gt;图片编辑</title>
 8 </head>
 9 <body>
10 <form action="${path}/materialImage/update.do" method="post">
11     <input type="file" id="sdfile" name="sdfile" onchange="preImg(this.id ,‘preview_2‘);">
12 </form>
13 <div id="tip1">
14 </div>
15 <div id="tip2">
16 </div>
17 <script>
18 function preImg(fileid, previewid)
19 {
20     //异步校验图片格式
21 $.ajax({
22     type: "POST",
23     url: "${path}/materialImage/imageCheck.do",
24     data: formdata,
25     contentType: false,
26     processData: false,
27     async: false,
28     cache: false,
29     success: function(data) {
30         if (data.result == 0) {
31             alert("请上传图片JPG或GIF格式的图片!!");
32             errorCount++;
33         } else if (data.result == 1) {
34             alert("请上传图片格式等于" + imgWidth + "×" + imgHeight + " 格式的图片!!");
35         } else if (data.result == 2) {
36             imgSize = data.imageSize;
37             alert("图片大于" + data.imageSize + "K!");
38         }
39     }
40 }
41 </script>

再看服务器端代码

  1 package com.lutongnet.cps.material.controller;
  2
  3 import java.awt.image.BufferedImage;
  4 import java.io.File;
  5 import java.io.IOException;
  6 import java.util.ArrayList;
  7 import java.util.Date;
  8 import java.util.HashMap;
  9 import java.util.Iterator;
 10 import java.util.List;
 11 import java.util.Map;
 12
 13 import javax.annotation.Resource;
 14 import javax.imageio.ImageIO;
 15 import javax.imageio.ImageReader;
 16 import javax.imageio.stream.ImageInputStream;
 17 import javax.servlet.http.HttpServletRequest;
 18
 19 import org.apache.commons.fileupload.disk.DiskFileItem;
 20 import org.slf4j.Logger;
 21 import org.slf4j.LoggerFactory;
 22 import org.springframework.http.HttpHeaders;
 23 import org.springframework.stereotype.Controller;
 24 import org.springframework.ui.Model;
 25 import org.springframework.web.bind.annotation.ModelAttribute;
 26 import org.springframework.web.bind.annotation.RequestMapping;
 27 import org.springframework.web.bind.annotation.RequestParam;
 28 import org.springframework.web.bind.annotation.ResponseBody;
 29 import org.springframework.web.multipart.MultipartHttpServletRequest;
 30 import org.springframework.web.multipart.commons.CommonsMultipartFile;
 31
 32
 33 /**
 34  * 图片素材Controller
 35  * @author     hehaitao
 36  * @since      1.0
 37  */
 38 @Controller
 39 @RequestMapping(value = "/materialImage")
 40 public class MaterialImageController2
 41 {
 42     private static Logger log = LoggerFactory.getLogger(MaterialImageController2.class);
 43
 44    @RequestMapping(value = "/imageCheck")
 45    @ResponseBody
 46    public Map<String,Object> imageCheck(HttpServletRequest request)
 47            throws IOException
 48    {
 49        Map<String, Object> jsonMap = new HashMap<String, Object>();
 50        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
 51        CommonsMultipartFile file = (CommonsMultipartFile) multipartRequest.getFile("file");
 52        DiskFileItem fi = (DiskFileItem)file.getFileItem();
 53        File bigFile = fi.getStoreLocation();
 54
 55        //判断图片格式必须为JPEG才开始上传
 56        if(checkImageType(bigFile, "JPEG") && (checkImageType(bigFile, "gif")) )
 57        {
 58               log.error("image type error!");
 59            jsonMap.put("result", 0);
 60        }
 61
 62        if(checkImageElement(bigFile, 1280, 720))
 63        {
 64            log.error("image element error!");
 65            jsonMap.put("result", 1);
 66        }
 67        if(checkImageSize(bigFile, 400) && checkImageType(bigFile, "gif"))
 68        {
 69            log.error("image size too large!");
 70            jsonMap.put("imageName","上传的高清gif");
 71            jsonMap.put("imageSize",400);
 72            jsonMap.put("result", 2);
 73        }
 74        if(checkImageSize(bigFile, 100) && checkImageType(bigFile, "JPEG"))
 75        {
 76            log.error("image size too large!");
 77            jsonMap.put("imageName","上传的高清jpg");
 78            jsonMap.put("imageSize",100);
 79            jsonMap.put("result", 3);
 80        }
 81
 82        return jsonMap;
 83    }
 84
 85     /**
 86      * 图片后缀的格式检验
 87      * @param file  文件
 88      * @param imageType  后缀格式,如"JPEG,png.."
 89      * @return true:符合imageType格式; false:不符合
 90      * @throws IOException
 91      */
 92     public static boolean checkImageType(File file, String imageType) throws IOException
 93    {
 94         if(!file.exists())
 95         {
 96             return false;
 97         }
 98            boolean result = false;
 99            ImageInputStream iis = ImageIO.createImageInputStream(file);
100            Iterator<ImageReader> readers = ImageIO.getImageReaders(iis);
101            ImageReader reader = null;
102            if(readers.hasNext())
103            {
104                reader = readers.next();
105            }
106            if(reader.getFormatName().equals(imageType))
107            {
108                result = true;
109            }
110            //System.out.println(reader.getFormatName());
111            return result;
112    }
113
114     /**
115      * 图片的像素判断
116      * @param file  文件
117      * @param imageWidth  图片宽度
118      * @param imageHeight   图片高度
119      * @return true:上传图片宽度和高度都小于等于规定最大值
120      * @throws IOException
121      */
122     public static boolean checkImageElement(File file, int imageWidth, int imageHeight) throws IOException
123     {
124         boolean result = false;
125            if(!file.exists())
126            {
127                return false;
128            }
129            BufferedImage bufferedImage = ImageIO.read(file);
130            if(bufferedImage != null && bufferedImage.getHeight() == imageHeight && bufferedImage.getWidth() == imageWidth)
131            {
132                result = true;
133            }
134            return result;
135     }
136
137     /**
138      * 检测图片的大小
139      * @param file 文件
140      * @param imageSize 图片最大值(KB)
141      * @return true:上传图片小于图片的最大值
142      */
143     public static boolean checkImageSize(File file, int imageSize)
144     {
145         boolean result = false;
146         if(!file.exists())
147         {
148             return false;
149         }
150         if((file.length() / 1024) <= imageSize)
151         {
152             result = true;
153         }
154
155         return result;
156     }
157
158
159
160 }

时间: 07-25

检验上传图片大小、尺寸、类型的两种实现方案的相关文章

CSS实现背景图尺寸不随浏览器大小而变化的两种方法

一些网站的首页背景图尺寸不随浏览器缩放而变化,本例使用CSS 实现背景图尺寸不随浏览器缩放而变化,方法一. 把图片作为background,方法二使用img标签.喜欢的朋友可以看看 一些网站的首页背景图尺寸不随浏览器缩放而变化,例如百度个人版的首页,缩放后背景图的尺寸并不改变:  再比如花瓣网( huaban.com ): 现在用CSS来实现这一效果. 首 先需要一张足够大尺寸的图片,上图百度背景图的尺寸为1600*1000px( 图片地址:http://4.su.bdimg.com/skin/

Oracle中,将毫秒数转换为timestamp类型的两种方法

在许多场景中,开发人员习惯用1970-01-01 00:00:00.000以来的毫秒数来表示具体的时间,这样可以将数据以NUMBER类型存储到数据库中,在某些时候方便比较,同样,有些时候我们需要 把这种毫秒数转换成标准的TIMESTAMP类型,现在总结了两种实现方法: 方法一: SELECT TO_TIMESTAMP('1970-01-01 00:00:00.000','yyyy-MM-dd hh24:mi:ss.ff3')+1397457489296/1000/60/60/24 FROM du

python利用mongodb上传图片数据 : GridFS 与 bson两种方式

利用mongodb保存图片通常有两种方法,一种是将图片数据转化为二进制作为字典的键值对进行保存,另一种是利用mongodb提供的GridFS进行保存,两者各有利弊.性能方面的优劣未曾测试,无法进行评价,此处仅对两种方式进行介绍,若有彻知者还望指教. 下面以如下数据作为示例进行介绍: 数据示例 dic = { "owner_name" : "samssmilin", "photo_id" : "602880671", "

(三)Redis两种持久化方案

Redis的持久化策略:2种 RDB方式的持久化是通过快照(snapshotting)完成的,当符合一定条件时Redis会自动将内存中的数据进行快照并持久化到硬盘.RDB是Redis默认采用的持久化方式. ---------aof:把所有的对redis的服务器进行修改的命令都存到一个文件里,命令的集合 rdb: 默认情况下,是快照rdb的持久化方式,将内存中的数据以快照的方式写入二进制文件中,默认的文件名是dump.rdb redis.conf配置: save 900 1 save 300 10

渐变色进度条的两种绘制方案

在App开发中经常会用到渐变色进度条控件,而自定义进度条的实现也不难,下面提供了两种渐变色进度条的实现方案. 效果图如下: 第一种实现方案:使用图层layer实现 层级结构如图所示: 构建过程如下: 1.创建容器 容器创建方案上采用的是生成UIView的子视图:LabelProgressBar, 把LabelProgressBar当作一个类似容器的控件而面向客户端. 好处是:可以方便的使用LabelProgressBar在Xib,StoryBoard,代码中. 而如果用其他的方式,却做不到这样使

测试当前机器的大小端模式(两种方法)

方法一: #include <stdio.h> int check_sys() {  int i = 1;  int *p = &i;  char *q = (char *)p;  if (*q == 1)  {   return 0;  }  else  {   return 1;  } } int main() {  int ret = check_sys();  if (ret == 1)  {   printf("big\n");  }  else  {  

ImageButton介绍及两种透明方案

java.lang.Object android.view.View android.widget.ImageView android.widget.ImageButton 直接子类: ZoomButton 类摘要: 显示一个可以被用户点击的图片按钮,默认情况下,ImageButton看起来像一个普通的按钮,在不同状态(如按下)下改变背景颜色.按钮的图片可用通过<ImageButton> XML元素的android:src属性或setImageResource(int)方法指定. 要删除按钮的

redis的两种持久化方案

人生在于折腾系列,网络,多线程等系列博客楼主还在继续折腾也不会放弃.这是全新的系列,缓存的知识其实并不仅仅在于简单的增删改查,我觉得有必要全面深入的学习一波.记录学习的过程与体悟. 2|0RDB 2|1什么是RDB 对redis中的数据执行周期性的持久化,通过配置文件中设置检查间隔时间与备份触发条件来对数据进行周期性的持久化 2|2RDB持久化的优点 RDB会生成多个数据文件,每个数据文件都代表了某一个时刻中redis的数据,这种多个数据文件的方式,非常适合做冷备份. RDB对redis对外提供

从源代码剖析Struts2中用户自定义配置转换器的两种方式——基于字段的配置转换器和基于类型的配置转换器(解决了实际系统中,因没有区分这两种工作方式的生命周期而引起的异常错误问题)

自定义类型转换器必须实现ongl.TypeConverter接口或对这个接口的某种具体实现做扩展 <<interface>>com.opensymphony.xwork2.conversion.TypeConverter à com.opensymphony.xwork2.conversion.impl.DefaultTypeConverter à org.apache.struts2.util.StrutsTypeConverter 接口及类进行解析 TypeConverter(