fileupload检测图片大小及格式,不经过后台

最新推荐文章于 2020-11-28 03:42:36 发布

唯丽是图

最新推荐文章于 2020-11-28 03:42:36 发布

阅读量1.9k

点赞数

分类专栏： # jquery 文章标签： fileupload

本文链接：https://blog.csdn.net/qq_41340666/article/details/80997524

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

fileupload是jquery的一款上传插件，非常好用，业务中经常会用到对上传的文件进行验证，很多时候我们都是把图片上传到服务器后再进行验证，这样不可避免的影响服务器性能，这里给大家介绍一下如何使用fileupload进行验证及检测

首先，需要引入的js文件：

这里以上传图片为例，直接上代码：

html：

<input type="hidden" id="idcardphoto" name="idcardurl"value="${stu.idcardurl}"> 
<input class="form-control" id="idcardurl" name="idcardurls" type="file" style="display: none" onchange="checkidcard(this.value);" accept="image/jpg" />
<a class="btn" onclick="$('#idcardurl').click();">选择图片</a>
<span id="idcardmessage" style="color: green"></span> <br>
<span style="color: red"><br>图片尺寸：保持原始证件大小<br>（参考数据宽560×高395）<br>文件大小：≤50KB<br>文件格式：.jpg</span>

js:

$("#idcardurl").fileupload({
    url :"bsmymessage/upidcard.do",//文件上传地址，当然也可以直接写在input的data-url属性内  
    //如果不指定json类型，则传来的json字符串就需要解析jQuery.parseJSON(data.result); 
    dataType : "json",     
    add : function(e, data) {
    //判断文件类型 ;
    var name = data.originalFiles[0]["name"];
    var index = name.lastIndexOf(".") + 1;
    var fileType = name.substring(index,name.length);
    if (fileType != "jpg") {
        alert("格式有误，仅支持jpg格式的图片！");
        return;
    }
    var maxsize = 50000;//50k
    var errMsg = "上传的身份证原件不能超过50k！！！";
    var size = data.originalFiles[0]["size"];
    if (size >= maxsize) {alert(errMsg);
        return;
    }
    var photowidth = 560;
    var photoheight = 395;
    var errorMsg = "上传失败,图片尺寸（像素）必须为：宽560×高395";
    if (!(window.File || window.FileReader|| window.FileList || window.Blob)) {
        alert('您的浏览器暂不支持图片预览，请更换Chrome、Firefox或IE浏览器');
        return;
    }
    //读取图片数据
    var len = $("#idcardurl").prop("files");
    var f = data.originalFiles[0];
    var reader = new FileReader();
    reader.onload = function(e) {
        var datas = e.target.result;
        //加载图片获取图片真实宽度和高度
        var image = new Image();
        image.onload = function() {
            var width = image.width;
            var height = image.height;
            if (width != photowidth|| height != photoheight) {
                alert(errorMsg);
                return;
            }
            data.submit();
        };
        image.src = datas;
    };
    reader.readAsDataURL(f);
},
    done : function(e, data) {
        if (data.result != null
            && data.result.state == true) {
            $("#idcardphoto").val(data.result.filename);
            document.getElementById("idcardmessage").innerHTML = "<em class='text-                
                success'>上传成功</em>";
        } else {
            alert(data.result.errmsg)
        }
    }
});

我使用的是springmvc框架，下面是java代码：

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.multipart.MultipartFile;
/**
	 * 上传身份证原件
	 * @return
	 * @author: guozongfei  
	 * @Createtime:
	 */
	@RequestMapping("/upidcard.do")
	public void upidcard(@RequestParam("idcardurls")MultipartFile idcardurl, HttpServletRequest request,HttpServletResponse response) {
		String returnMsg="";
		if(idcardurl!=null){
			try {
				String fname=idcardurl.getOriginalFilename();
			   String extens = fname.substring(fname.lastIndexOf("."));//得到文件的扩展名
			   String newName = UUIDUtil.getuuid()+extens;//新的文件名称
				File newfile=new File(Global.getSysRootPath()+"/upload/photo/"+newName);
				idcardurl.transferTo(newfile);
					
					returnMsg="{\"state\":true,\"filename\":\""+newName+"\"}";
				} catch (IllegalStateException e) {
		
				returnMsg="{\"state\":false,\"errmsg\":\"上传失败，保存文件异常\"}";
				e.printStackTrace();
			} catch (IOException e) {
	
				returnMsg="{\"state\":false,\"errmsg\":\"上传失败，保存文件异常\"}";
				e.printStackTrace();
			}
		}else{
			returnMsg="{\"state\":false,\"errmsg\":\"上传文件为空\"}";
		}
		try {
			response.setCharacterEncoding("utf-8");
			response.setContentType("text/html;charset=UTF-8");
			response.getWriter().write(returnMsg);
		} catch (IOException e) {
			e.printStackTrace();
		}
		
	}

以上就是上传图片以及检测图片尺寸、大小及格式的全部代码，欢迎各位前来探讨指教