Java上传图片预览并通过后端压缩
2024-05-11 05:22:34
1.前端上传图片预览
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%String contextPath = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<script src="<%=contextPath%>/js/jquery-1.11.3.js"></script>
<title>图片上传</title>
<style type="text/css"> .float_zm{ float_zm:left; width : 200px; height: 200px; overflow: hidden; border: 1px solid #CCCCCC; border-radius: 10px; padding: 5px; margin: 5px; position:absolute;left:50%;margin-left: -100px;} .result{ width: 200px; height: 200px; text-align: center; box-sizing: border-box; }
</style>
<script type="text/javascript">
$(function(){var input = document.getElementById("file_input_zm"); if(typeof FileReader==='undefined'){ alert("抱歉，你的浏览器不支持 FileReader"); input.setAttribute('disabled','disabled'); }else{ input.addEventListener('change',readFile,false); }function readFile(){ var iLen = this.files.length; var index = 0; for(var i=0;i<iLen;i++){ if (!input['value'].match(/.jpg|.gif|.png|.jpeg|.bmp/i)){ //判断上传文件格式 return alert("上传的图片格式不正确，请重新选择"); } /* if (this.files[i].size > 1048576){return alert("上传的图片大小超过1M，请重新选择"); //判断上传图片大小} */ var reader = new FileReader(); reader.index = i; reader.readAsDataURL(this.files[i]); //转成base64 reader.fileName = this.files[i].name; reader.onload = function(e){ $("#zmtp").empty();var result = '<div class="float_zm"><div onclick="select_zm()" class="result"><img id="sfzzm" src="'+this.result+'" /></div></div>'; $("#zmtp").html(result);var img = document.getElementById('sfzzm');img.onload = function(){ var nowHeight = ReSizePic(this); //设置图片预览大小 this.parentNode.style.display = 'block'; var oParent = this.parentNode; if(nowHeight){ oParent.style.paddingTop = (oParent.offsetHeight - nowHeight)/2 + 'px'; } } } } } })function ReSizePic(ThisPic) { var RePicWidth = 200; //目标宽度 var TrueWidth = ThisPic.width; //图片实际宽度 var TrueHeight = ThisPic.height; //图片实际高度 if(TrueWidth>TrueHeight){ //宽大于高 var reWidth = RePicWidth; ThisPic.width = reWidth; //垂直居中 var nowHeight = TrueHeight * (reWidth/TrueWidth); return nowHeight; //将图片修改后的高度返回，供垂直居中用 }else{ //宽小于高 var reHeight = RePicWidth; ThisPic.height = reHeight; }
} //选择照片
function select_zm(){$("#file_input_zm").click();
} //上传
function myCheck(){var sfzzm = $("#sfzzm").attr("src");if(sfzzm == ''){alert("请选择照片");return false;}$("#form").submit();
}
</script>
</head>
<body><form id="form" action="wap_ajbj_upload_save.htm" method="post" enctype="multipart/form-data"><input type="file" id="file_input_zm" name="file_input_zm" style="display: none;"/><div id="zmtp" style="width: 100%;height: 240px;position:relative;"> <div class="float_zm"><div class="result" onclick="select_zm()"><img id="sfzzm" name="sfzzm" /><span id="zpbz" style="font-size: 16px;line-height: 200px;">照片(点击上传)</span></div> </div></div> <div style="text-align: center;margin: 0 auto;"><button style="width: 80%;" type="button" onclick="myCheck()">上传</button></div> </form>
</body>
</html>2.后端压缩保存图片
private String filePath = LxwmController.class.getResource("/").getPath().split("WEB-INF")[0]+ "upload/";@RequestMapping(value = "wap_ajbj_upload_save.htm", method = { RequestMethod.GET,RequestMethod.POST })public ModelAndView wap_ajbj_upload_save(MultipartHttpServletRequest request) throws Exception {ModelAndView mv = new ModelAndView("wap/ajbj_index");MultipartFile file = null;String file_ys = "";file = ((MultipartRequest) request).getFile("file_input_zm");if(file != null && !file.isEmpty()){String filename = file.getOriginalFilename(); //获取文件的名字filename = new String(filename.getBytes("UTF-8"), "UTF-8");String suffix = filename.substring(filename.lastIndexOf(".") + 1);filename = System.currentTimeMillis() + "." + suffix;file_ys = "/ajbj/fm/" + filename;try {//原图片copyFileRename(file.getInputStream(), filename,filePath + "/ajbj/zm/");} catch (IOException e) {e.printStackTrace();}//压缩图片compressImage(file,filePath + file_ys);}return mv;}public static void copyFileRename(InputStream in, String fileName,String myFilePath) throws IOException {FileOutputStream fs = new FileOutputStream(myFilePath + fileName);byte[] buffer = new byte[1024 * 1024];int byteread = 0;while ((byteread = in.read(buffer)) != -1) {fs.write(buffer, 0, byteread);fs.flush();}fs.close();in.close();}//压缩照片public Boolean compressImage(MultipartFile source_file,String target_path) throws IOException {try { int maxWidth = 400;//限制最大宽int maxHeight = 400;//限制最大高//获得文件源InputStream ins = source_file.getInputStream();File file = new File(source_file.getOriginalFilename());inputStreamToFile(ins, file);Image img = ImageIO.read(file);int originWidth = img.getWidth(null);int originHeight = img.getHeight(null);int targetWidth = 0;//目标宽int targetHeight = 0;//目标高//宽或者高超过最大上限时进行压缩if (originWidth > maxWidth || originHeight > maxHeight) {if(originWidth >= originHeight){//横图或方图targetWidth = maxWidth;targetHeight = (int) Math.round(maxWidth * (double)originHeight / (double)originWidth);}else{//竖图targetHeight = maxHeight;targetWidth = (int) Math.round(maxHeight * (double)originWidth / (double)originHeight);}}BufferedImage tag = new BufferedImage(targetWidth,targetHeight,BufferedImage.TYPE_INT_RGB);tag.getGraphics().drawImage(img,0,0,targetWidth,targetHeight,null);FileOutputStream out = new FileOutputStream(target_path);//JPEGImageEncoder可适用于其他图片的类型的转换JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(out);JPEGEncodeParam encoder_param = JPEGCodec.getDefaultJPEGEncodeParam(tag);encoder_param.setQuality(1f, true);//质量压缩,范围为0.1-1之间,若压缩尺寸过小,建议压缩质量设为最高1fencoder.setJPEGEncodeParam(encoder_param);encoder.encode(tag);out.close();return true; } catch(Exception e) { return false; } } public static void inputStreamToFile(InputStream ins,File file) {try {OutputStream os = new FileOutputStream(file);int bytesRead = 0;byte[] buffer = new byte[8192];while ((bytesRead = ins.read(buffer, 0, 8192)) != -1) {os.write(buffer, 0, bytesRead);}os.close();ins.close();} catch (Exception e) {e.printStackTrace();}}备注：后端压缩相比前端JS压缩的优点是不限制文件大小，若通过前端JS压缩把图片转化为base64上传的话，则必须保证压缩后的文件小于1.5M，否则上传失败。
Java上传图片预览并通过后端压缩相关推荐
- ssm java上传图片预览_ssm文件上传_上传图片
1.搭建好ssm框架 2.导入文件上传所需依赖 commons-fileupload commons-fileupload 1.4 commons-io commons-io 2.6 commons- ...
- ssm java上传图片预览_基于JAVA的SSM图片浏览系统
今天和一个朋友共同完成了一个图片浏览系统的设计与实现项目,我们在开发时选用的框架是SSM(MYECLIPSE)框架.我这个朋友知识有限,只会这个框架,哈哈,都是为了方便他.和往常一样选用简单又便捷的M ...
- java 根据预览图片上传_JavaSctit 利用FileReader和滤镜上传图片预览功能
filereader 对象允许web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 file或 blob对象指定要读取的文件或数据. 1.filereader接口的方法 fi ...
- 上传图片预览并在后台处理
<a class="a-upload"><input type="file" name="fpic1" onchange= ...
- 上传图片显示扫描效果html5,JS+HTML5实现上传图片预览效果完整实例【测试可用】...
本文实例讲述了JS+HTML5实现上传图片预览效果.分享给大家供大家参考,具体如下: 在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能:之前的做的一个解决方案是文件 ...
- HTML5 上传图片预览
html5出现之前如果需要上传图片预览 一般都是先上传到服务器然后远程预览 html5出现之后 有个filereader 解决了这问题 //选中图片之后$("#fileAddPic&qu ...
- input file上传图片预览
下载地址http://download.csdn.net/detail/cometwo/9383602 兄弟文章:http://blog.csdn.net/libin_1/article/detail ...
- anguarjs 上传图片预览_JS控制上传图片个数，预览上传图片
一共是2个函数 //这个函数的作用预览上传的图片 function fileView(filesObj){ //显示上传图片预览 var view=document.querySelector(&qu ...
- 微信小程序上传图片 预览 删除
微信小程序上传图片 预览 删除 ①.wxml<view class='footerEditOne'><view wx:for="{{src}}" wx:key=' ...
最新文章
- SAP删除会计科目 OBR2
- 解决VS2017运行时控制台一闪即逝问题的方法
- ios怎样在一个UIImageButton的里面加一些自己定义的箭头
- 抓取图像像素到int数组
- 十二、十三天总结笔记
- Maven : maven异常记录-must be unique maven duplicate declaration of version
- 如何解决大量的if语句或switch case语句？
- java data 图像 显示_Java（JMF）获取本地摄像头，实时显示图像
- matlab 箱图不显示异常值_无功功率显示值与计算值不匹配？
- Ninject学习（一） - Dependency Injection By Hand
- 基于MK802 MiniPC的扩展开发应用-系统自制
- CSS 双击页面，出现蓝色背景解决方案
- php汉字大写金额,php 数字金额转中文汉字大写金额
- 解决python同时执行多个程序的方案
- lambda学习视频和stream学习视频(Java8 Lambda表达式视频教程)-Java爬虫-网络购物的正确打开方式
- C++_Primer_学习笔记_第十九章（特殊工具和技术）
- Linux: fPIC与 pie 区别
- IDE工具(27) idea点击箭头快速切换到相关联的类位置 (Free MyBatis插件)
- 机器学习08：最近邻学习
- 向日葵公主与驴的寓言故事