博客分类：
图片上传及文件上传，前端html实现文件上传和普通的向后台传参数不同，必须用到form表单，同时form标签必须加上enctype="multipart/form-data"属性，method必须为post，表单中的input的type为file，这样前端上传文件的工作就完成了，这里后台文件的存储不做详细的介绍，因为用到的是struts2，文件上传的功能已经封装好了，但是还是需要注意几点，action中类型为File的属性名必须和input标签的name相同，同时action中必须有contentType和fileName属性，这里不是本文讲的重点就不做详细介绍了。
& 大家知道，form表单的post请求是同步请求，如果没有指定target属性，默认情况下提交后会刷新页面，想要做到提交请求后不页面不动即能回显上传的图片，这就需要一些处理，这里我用到了隐藏的iframe，将form表单的target指向iframe的名字，这样form表单提交后返回的结果将在iframe中显示。
&!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=UTF-8"&
&title&Upload Image Demo&/title&
&script type="text/javascript" src="js\jquery-1.7.1.min.js"&&/script&
&script type="text/javascript"&
function upload(){
$('form').submit();
$('img').attr('src','img/vote_img_loading.png')
$(document).ready(function(){
$(':input[type=file]').change(upload);
function showPic(path){
$('img').attr('src','file/'+path).next('span').css('visibility','visible');
&style type="text/css"&
width: 100
height: 100
margin: 0 5px 0 0;
.pic span {
margin: -20px 0 0;
height: 20
width: 100
text-align:
line-height: 20
background: url(img/template_list_titlebg.png) ;
.pic form {
width: 100
height: 100
z-index: 10;
margin: -100px 0 0;
.pic input {
font-size: 100
-moz-opacity: 0;
filter: alpha(opacity = 0);
opacity: 0;
background:
margin: -10px 0 0 -650px 9;
&iframe style="display:none" name="if"&
&div class="pic"&
&img height="100" width="100" src="img/update_pic.png"&&span
style="visibility: hidden"&重新上传&/span&
&form enctype="multipart/form-data" method="POST" action="upload.action" target="if"&
&input type="file" name="upload"/&
关于iframe中显示的内容是图片回显的关键，以下是返回的内容：
&html&
&script type="text/javascript"&
var pid = window.location.search.split('=')[1];
top.window.showPic(pid);
可以看到返回的内容很简单，就是一段javascript代码，因为当form表单提交后，我做了url重定向，并把图片的存储路径作为重定向url的参数，这段javascript代码首先从iframe的location中获得图片的存储路径，然后调用父窗口的showPic函数，并将图片存储路径传入函数，showPic函数是写在父床口中的，为什么可以这么做，因为子窗口可以调用父窗口的函数，但是反过来父窗口调用子窗口的函数是不被允许的。showPic函数如下：
function showPic(path){
$('img').attr('src','file/'+path).next('span').css('visibility','visible');
}
&& 它的作用就是将img标签的src指向传过来的图片路径，这时候浏览器就回去加载这个图片，这样就轻松的实现了图片上传并迅速回显的功能，我附上了实现这个功能的整个工程，是一个eclipse的maven工程，需要通过本机maven命令下载依赖包。
下载次数: 340
浏览 26681
浏览: 192906 次
来自: 北京
我是沙发，第一次做，不见怪
[flash=200,200][/flash]
不错，谢谢！
iccboy 写道请问博主，这个和commons-httpcl ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'　&此前有同事跟我聊过关于移动端用canvas压缩图片后再上传的功能，最近有了点空闲时间，所以就实践了一下。demo效果链接在文章底部贴出。
　　在做移动端图片上传的时候，用户传的都是手机本地图片，而本地图片一般都相对比较大，拿iphone6来说，平时拍很多图片都是一两M的，如果直接这样上传，那图片就太大了，如果用户用的是移动流量，完全把图片上传显然不是一个好办法。
　　目前来说，HTML5的各种新API都在移动端的webkit上得到了较好的 实现。根据查看caniuse，本demo里使用到的FileReader、Blob、Formdata对象均已在大部分移动设备浏览器中得到了实现 （safari6.0+、android 3.0+），所以直接在前端压缩图片，已经成了很多移动端图片上传的必备功能了。
　　在移动端压缩图片并且上传主要用到filereader、canvas 以及 formdata 这三个h5的api。逻辑并不难。整个过程就是：
　　（1）用户使用input file上传图片的时候，用filereader读取用户上传的图片数据（base64格式）
　　（2）把图片数据传入img对象，然后将img绘制到canvas上，再调用canvas.toDataURL对图片进行压缩
　　（3）获取到压缩后的base64格式图片数据，转成二进制塞入formdata，再通过XmlHttpRequest提交formdata。
　　如此三步，就完成了图片的压缩和上传。
　　说起来好像挺简单，其实还是有些坑的。接下来就直接用代码进行分析：
　　【一】获取图片数据
　　先是获取图片数据，也就是监听input file的change事件，然后获取到上传的文件对象files，将类数组的files转成数组，然后进行forEach遍历。
　　接着判断文件类型，如果不是图片则不作处理。如果是图片就实例化一个filereader，以base64格式读取上传的文件数据，判断数据长度，如果大于200KB的图片就调用compress方法进行压缩，否则调用upload方法进行上传。
filechooser.onchange = function () { &&&&&&& if (!this.files.length)
&&&&&&& var files = Array.prototype.slice.call(this.files);
&&&&&&& if (files.length & 9) { &&&&&&&&&&& alert("最多同时只可上传9张图片"); &&&&&&&&&&& &&&&&&& }
&&&&&&& files.forEach(function (file, i) { &&&&&&&&&&& if (!/\/(?:jpegpnggif)/i.test(file.type))
&&&&&&&&&&& var reader = new FileReader();
&&&&&&&&&&& var li = document.createElement("li"); &&&&&&&&&&& li.innerHTML = "&div class="progress"&&span&&/span&&/div&"; &&&&&&&&&&& $(".img-list").append($(li));
&&&&&&&&&&& reader.onload = function () { &&&&&&&&&&&&&&& var result = this. &&&&&&&&&&&&&&& var img = new Image(); &&&&&&&&&&&&&&& img.src =
&&&&&&&&&&&&&&& //如果图片大小小于200kb，则直接上传 &&&&&&&&&&&&&&& if (result.length &= maxsize) { &&&&&&&&&&&&&&&&&&& $(li).css("background-image", "url(" + result + ")"); &&&&&&&&&&&&&&&&&&& img = &&&&&&&&&&&&&&&&&&& upload(result, file.type, $(li));
&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&& }
//&&&&&&&&&&&&&&& 图片加载完毕之后进行压缩，然后上传 &&&&&&&&&&&&&&& if (plete) { &&&&&&&&&&&&&&&&&&& callback(); &&&&&&&&&&&&&&& } else { &&&&&&&&&&&&&&&&&&& img.onload = &&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&& function callback() { &&&&&&&&&&&&&&&&&&& var data = compress(img);
&&&&&&&&&&&&&&&&&&& $(li).css("background-image", "url(" + data + ")");
&&&&&&&&&&&&&&&&&&& upload(data, file.type, $(li));
&&&&&&&&&&&&&&&&&&& img = &&&&&&&&&&&&&&& }
&&&&&&&&&&& };
&&&&&&&&&&& reader.readAsDataURL(file); &&&&&&& }) &&& };
　【2】压缩图片
　　上面做完图片数据的获取后，就可以做compress压缩图片的方法了。而压缩图片也并不是直接把图片绘制到canvas再调用一下toDataURL就行的。
　　在IOS中，canvas绘制图片是有两个限制的：
　　首先是图片的大小，如果图片的大小超过两百万像素，图片也是无法绘制到canvas上的，调用drawImage的时候不会报错，但是你用toDataURL获取图片数据的时候获取到的是空的图片数据。
　　再者就是canvas的大小有限制，如果canvas的大小大于大概五百万像素（即宽高乘积）的时候，不仅图片画不出来，其他什么东西也都是画不出来的。
　　应对第一种限制，处理办法就是瓦片绘制了。瓦片绘制，也就是将图片分割成多块绘制到canvas上，我代码里的做法是把图片分割成100万像素一块的大小，再绘制到canvas上。
　　而应对第二种限制，我的处理办法是对图片的宽高进行适当压缩，我代码里为了保险起见，设的上限是四百万像素，如果图片大于四百万像素就压缩到小于四百万像素。四百万像素的图片应该够了，算起来宽高都有了。
　　如此一来就解决了IOS上的两种限制了。
　　除了上面所述的限制，还有两个坑，一个就是canvas的toDataURL是只能压缩jpg的，当用户上传的图片是png的话，就需要转成 jpg，也就是统一用canvas.toDataURL("image/jpeg", 0.1) ，&类型统一设成jpeg，而压缩比就自己控制了。
　　另一个就是如果是png转jpg，绘制到canvas上的时候，canvas存在透明区域的话，当转成jpg的时候透明区域会变成黑色，因为 canvas的透明像素默认为rgba(0,0,0,0)，所以转成jpg就变成rgba(0,0,0,1)了，也就是透明背景会变成了黑色。解决办法就 是绘制之前在canvas上铺一层白色的底色。
function compress(img) {
&&&&&&& var initSize = img.src.
&&&&&&& var width = img.
&&&&&&& var height = img.
&&&&&&& //如果图片大于四百万像素，计算压缩比并将大小压至400万以下
&&&&&&& if ((ratio = width * height / ) {
&&&&&&&&&&& ratio = Math.sqrt(ratio);
&&&&&&&&&&& width /=
&&&&&&&&&&& height /=
&&&&&&& }else {
&&&&&&&&&&& ratio = 1;
&&&&&&& canvas.width =
&&&&&&& canvas.height =
//&&&&&&& 铺底色
&&&&&&& ctx.fillStyle = "#fff";
&&&&&&& ctx.fillRect(0, 0, canvas.width, canvas.height);
&&&&&&& //如果图片像素大于100万则使用瓦片绘制
&&&&&&& if ((count = width * height / 1000000) & 1) {
&&&&&&&&&&& count = ~~(Math.sqrt(count)+1); //计算要分成多少块瓦片
//&&&&&&&&&&& 计算每块瓦片的宽和高
&&&&&&&&&&& var nw = ~~(width / count);
&&&&&&&&&&& var nh = ~~(height / count);
&&&&&&&&&&& tCanvas.width =
&&&&&&&&&&& tCanvas.height =
&&&&&&&&&&& for (var i = 0; i & i++) {
&&&&&&&&&&&&&&& for (var j = 0; j & j++) {
&&&&&&&&&&&&&&&&&&& tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
&&&&&&&&&&&&&&&&&&& ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
&&&&&&&&&&&&&&& }
&&&&&&&&&&& }
&&&&&&& } else {
&&&&&&&&&&& ctx.drawImage(img, 0, 0, width, height);
&&&&&&& //进行最小压缩
&&&&&&& var ndata = canvas.toDataURL("image/jpeg", 0.1);
&&&&&&& console.log("压缩前：" + initSize);
&&&&&&& console.log("压缩后：" + ndata.length);
&&&&&&& console.log("压缩率：" + ~~(100 * (initSize - ndata.length) / initSize) + "%");
&&&&&&& tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
　　【三】图片上传
　　完成图片压缩后，就可以塞进formdata里进行上传了，先将base64数据转成字符串，再实例化一个ArrayBuffer，然后将字符 串以8位整型的格式传入ArrayBuffer，再通过BlobBuilder或者Blob对象，将8位整型的ArrayBuffer转成二进制对象 blob，然后把blob对象append到formdata里，再通过ajax发送给后台即可。
　　XmlHttpRequest2中不仅可以发送大数据，还多出了比如获取发送进度的API，我代码里也进行了简单的实现。
//&&& 图片上传，将base64的图片转成二进制对象，塞进formdata上传
&&& function upload(basestr, type, $li) {
&&&&&&& var text = window.atob(basestr.split(",")[1]);
&&&&&&& var buffer = new ArrayBuffer(text.length);
&&&&&&& var ubuffer = new Uint8Array(buffer);
&&&&&&& var pecent = 0 , loop =
&&&&&&& for (var i = 0; i & text. i++) {
&&&&&&&&&&& ubuffer[i] = text.charCodeAt(i);
&&&&&&& var Builder = window.WebKitBlobBuilder
window.MozBlobB
&&&&&&& if (Builder) {
&&&&&&&&&&& var builder = new Builder();
&&&&&&&&&&& builder.append(buffer);
&&&&&&&&&&& blob = builder.getBlob(type);
&&&&&&& } else {
&&&&&&&&&&& blob = new window.Blob([buffer], {type: type});
&&&&&&& var xhr = new XMLHttpRequest();
&&&&&&& var formdata = new FormData();
&&&&&&& formdata.append("imagefile", blob);
&&&&&&& xhr.open("post", "/cupload");
&&&&&&& xhr.onreadystatechange = function () {
&&&&&&&&&&& if (xhr.readyState == 4 && xhr.status == 200) {
&&&&&&&&&&&&&&& console.log("上传成功：" + xhr.responseText);
&&&&&&&&&&&&&&& clearInterval(loop);
&&&&&&&&&&&&&&& //当收到该消息时上传完毕
&&&&&&&&&&&&&&& $li.find(".progress span").animate({"width": "100%"}, pecent & 95 ? 200 : 0, function () {
&&&&&&&&&&&&&&&&&&& $(this).html("上传成功");
&&&&&&&&&&&&&&& });
&&&&&&&&&&&&&&& $(".pic-list").append("&a href="" + xhr.responseText + ""&" + xhr.responseText + "&img src="" + xhr.responseText + "" /&&/a&")
&&&&&&&&&&& }
&&&&&&& };
&&&&&&& //数据发送进度，前50%展示该进度
&&&&&&& xhr.upload.addEventListener("progress", function (e) {
&&&&&&&&&&& if (loop)
&&&&&&&&&&& pecent = ~~(100 * e.loaded / e.total) / 2;
&&&&&&&&&&& $li.find(".progress span").css("width", pecent + "%");
&&&&&&&&&&& if (pecent == 50) {
&&&&&&&&&&&&&&& mockProgress();
&&&&&&&&&&& }
&&&&&&& }, false);
&&&&&&& //数据后50%用模拟进度
&&&&&&& function mockProgress() {
&&&&&&&&&&& if (loop)
&&&&&&&&&&& loop = setInterval(function () {
&&&&&&&&&&&&&&& pecent++;
&&&&&&&&&&&&&&& $li.find(".progress span").css("width", pecent + "%");
&&&&&&&&&&&&&&& if (pecent == 99) {
&&&&&&&&&&&&&&&&&&& clearInterval(loop);
&&&&&&&&&&&&&&& }
&&&&&&&&&&& }, 100)
&&&&&&& xhr.send(formdata);
　至此，整个上传的前端图片压缩就完成了，因为是用了formdata提交，所以后台接数据的时候就跟普通form表单提交数据一样处理即可。
　　如果对该demo有兴趣的可以看这个demo的github地址：
　　前端代码：　　
　　顺便也贴出后台的实现（nodejs）：& &
阅读(...) 评论()选取图片裁剪并上传功能的实现（后台java实现） - CSDN博客
选取图片裁剪并上传功能的实现（后台java实现）
头像裁剪上传功能，用到的技术有 &jquery，springmvc，裁剪插件用的是jcrop（中间遇到很多坑，最终跨越）。由于保密性我不能将别的源码发送到网上，请大家见谅。
图片上传步骤：
1.用户选择图片
2.将图片传入后台：用户选择图片的时候选择的是各种各样的，但是我们的网页显示图片大小是有限的，所以我们就要在用户选择图片之后将图片添加到后台进行压缩，压缩成我们想要的大小，之后再显示到页面才好
3.利用jcrop裁剪工具对图片进行裁剪并且实时预览
4.点击确定按钮将裁剪用到的参数传入后台，后台图片进行剪切，之后缩放成我们需要的格式
5.最后将图片路径传到前台进行展示
前台页面代码为：
&script src=&js-jcrop/jquery.min.js&&&/script&
&script src=&js-jcrop/jquery.Jcrop.js&&&/script&
&script src=&js/jquery-form.js&&&/script&
&link rel=&stylesheet& href=&../css/jquery.Jcrop.css& type=&text/css& /&
&style type=&text/css&&
/* 控制预览区域大小*/
#preview-pane .preview-container {
width: 110
height: 110
#targetDiv{
width: 400
height: 400
background-color:#f7
&dl class=&dialogBox D_uploadLogo&&
&dt class=&dialogHeader&&
&span class=&title&&头像上传&/span&
&dd class=&dialogBody&&
&dl class=&bisinessLogo&&
&dt class=&title&&预览&/dt&
&dd class=&img&&
&div id=&preview-pane&&
&div class=&preview-container&&
&img src=&& id=&target2& class=&jcrop-preview& alt=&未选择图片& /&
&dd class=&tc&&尺寸：110*110px&/dd&
&dl class=&bisinessInfo&&
&dt class=&btnBox02&&
&form id=&fileUp& action=&/file/img/upload& method=&post& enctype=&multipart/form-data& target=&ifm&&
&a class=&btnGray& href=&javascript:;&&
&span class=&text& id=&format&&选择图片&/span&
&b class=&bgR&&&/b&
&input type=&file& id=&file_upload& class=&inputFile& name=&userphoto&/&
&input type=&hidden& id=&w& name=&w&/&
&input type=&hidden& id=&h& name=&h&/&
&input type=&hidden& id=&x& name=&x&/&
&input type=&hidden& id=&y& name=&y&/&
&dd class=&info&&
请从本地选择一张照片，支持jpg,png格式    &span id=&msg&&&/span&
&div id=&targetDiv&&
&img src=&& id=&target& width=&400& height=&400& alt=&未选择图片&/&
&input type=&hidden& id=&filePathInput& value=&&/&
&dd class=&dialogBottom&&
&a class=&btnBlue btn_confirm& href=&javascript:;& onclick=&photoSummit();&&&span class=&text&&确定&/span&&b class=&bgR&&&/b&&/a&
&a class=&btnGray btn_cancel& href=&javascript:;& onclick=&hideDialog();&&&span class=&text&&取消&/span&&b class=&bgR&&&/b&&/a&
1.选择图片
&img src=&& id=&target& width=&400& height=&400& alt=&未选择图片&/&
2.提交：首先大家知道文件上传的时候用到的标签为：&input type=&file&/& & 但是有时候我们需要用ajax提交文件并且异步提交，我们如果是用form表单提交的话就不是异步，这样我们回到页面就刷新页面，非常的不方便，但是现在ajax还不能支持文件提交的方式，这时候我们就用到了jquery-form.js,这个文件支持我们用ajax提交文件，代码为：
$(&#fileUp&).&span style=&color:#ff0000;&&ajaxSubmit&/span&({
type: &POST&,
url:&/file/img/upload&,
dataType: &json&,
contentType:&application/json&,
success: function(parameter){
$(&#target2&).attr('src','/upload/'+parameter.fileName);
$(&#filePathInput&).val('/upload/'+parameter.fileName);
if($(&#format&).text()==&重新上传&){
jcrop_api.destroy()
$(&#format&).text(&重新上传&);
//启动jcrop支持
openJcrop('/upload/'+parameter.fileName);
error : function(data) {
alert(&ajax传输发生错误！！！&);
});这样就能将文件用ajax的方式提交到后台，注意这里用的是ajaxSubmit，这个方法对应jquery-form.js，后台代码为：package com.quanshi.ums.gate.view.rest.
import java.io.IOE
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpS
import org.slf4j.L
import org.slf4j.LoggerF
import org.springframework.stereotype.C
import org.springframework.web.bind.annotation.RequestM
import org.springframework.web.bind.annotation.RequestM
import org.springframework.web.bind.annotation.RequestP
import org.springframework.web.bind.annotation.ResponseB
import org.springframework.web.multipart.MultipartF
import com.quanshi.ums.gate.persistence.entities.P
import com.quanshi.ums.gate.view.rest.ImgE
 * 图像上传和修改相关类
 * @author kunpeng.zhao
@Controller
@RequestMapping(value=&/file&)
public class FileEditorController {
&span style=&white-space:pre&& &/span&ImgEditor imgEditor = new ImgEditor();
&span style=&white-space:pre&& &/span&public String filePathFinal = &&;
&span style=&white-space:pre&& &/span&private Logger logger = LoggerFactory.getLogger(FileEditorController.class);
&span style=&white-space:pre&& &/span&@RequestMapping(value=&/img/cutandscale&,method=RequestMethod.POST)
&span style=&white-space:pre&& &/span&public @ResponseBody int cutAndscaleimg(
&span style=&white-space:pre&&
&/span&@RequestParam(&w&) int w,
&span style=&white-space:pre&&
&/span&@RequestParam(&h&) int h,
&span style=&white-space:pre&&
&/span&@RequestParam(&x&) int x,
&span style=&white-space:pre&&
&/span&@RequestParam(&y&) int y
&span style=&white-space:pre&&
&span style=&white-space:pre&&
&/span&imgEditor.cut(filePathFinal,filePathFinal,x,y,w,h);
&span style=&white-space:pre&&
&/span&imgEditor.scale(filePathFinal, filePathFinal, 110, 110, false);
&span style=&white-space:pre&&
&/span&return 1;
&span style=&white-space:pre&& &/span&}
&span style=&white-space:pre&& &/span&
&span style=&white-space:pre&& &/span&
    @RequestMapping(value=&/img/upload&,method=RequestMethod.POST)
    public @ResponseBody Parameters addImage(
    &span style=&white-space:pre&&
&/span&@RequestParam(&userphoto&) MultipartFile file,
    &span style=&white-space:pre&&
&/span&HttpServletRequest request,
    &span style=&white-space:pre&&
&/span&HttpServletResponse response,
    &span style=&white-space:pre&&
&/span&HttpSession session
    &span style=&white-space:pre&&
    &span style=&white-space:pre&& &/span&String filePath = &&; 
    &span style=&white-space:pre&& &/span&try {
    &span style=&white-space:pre&&
&/span&//上传原图
&span style=&white-space:pre&&
&/span&filePath = imgEditor.uploadFile(file, request,session);
&span style=&white-space:pre&&
&/span&filePathFinal = fileP
&span style=&white-space:pre&&
&/span&//将图片压缩成指定大小
&span style=&white-space:pre&&
&/span&imgEditor.zoomImage(filePath,filePath,400,400);
&span style=&white-space:pre&&
&/span&} catch (IOException e) {
&span style=&white-space:pre&&
&/span&e.printStackTrace();
&span style=&white-space:pre&&
&/span&}  
        (&filePath:& + filePath);
        Parameters parameter = new Parameters();
        parameter.setFileName(imgEditor.getFileName(file,request,session));
    &span style=&white-space:pre&& &/span&
    }
    
    
   
    
我在这规定图片在前台展示的大小为400*400，用到的图片裁剪压缩等的工具类为：
package com.quanshi.ums.gate.view.
import java.awt.C
import java.awt.G
import java.awt.Graphics2D;
import java.awt.I
import java.awt.T
import java.awt.geom.AffineT
import java.awt.image.AffineTransformOp;
import java.awt.image.BufferedI
import java.awt.image.CropImageF
import java.awt.image.FilteredImageS
import java.awt.image.ImageF
import java.io.F
import java.io.IOE
import java.text.SimpleDateF
import java.util.D
import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpS
import org.springframework.security.core.context.SecurityContextH
import org.springframework.web.multipart.MultipartF
public class ImgEditor {
* 改变图片尺寸
* @param srcFileName 源图片路径
* @param tagFileName 目的图片路径
* @param width 修改后的宽度
* @param height 修改后的高度
public void zoomImage(String srcFileName,String tagFileName,int width,int height){
BufferedImage bi = ImageIO.read(new File(srcFileName));
BufferedImage tag=new BufferedImage(width,height, BufferedImage.TYPE_INT_RGB);
tag.getGraphics().drawImage(bi, 0, 0, width, height, null);
ImageIO.write(tag, &jpg&, new File(tagFileName));//画图
} catch (IOException e) {
e.printStackTrace();
* 缩放图像（按高度和宽度缩放）
* @param srcImageFile 源图像文件地址
* @param result 缩放后的图像地址
* @param height 缩放后的高度
* @param width 缩放后的宽度
* @param bb 比例不对时是否需要补白：true为补白; false为不补白;
public void scale(String srcImageFile, String result, int height, int width, boolean bb) {
double ratio = 0.0; // 缩放比例
File f = new File(srcImageFile);
BufferedImage bi = ImageIO.read(f);
Image itemp = bi.getScaledInstance(width, height, bi.SCALE_SMOOTH);
// 计算比例
if ((bi.getHeight() & height) || (bi.getWidth() & width)) {
if (bi.getHeight() & bi.getWidth()) {
ratio = (new Integer(height)).doubleValue()
/ bi.getHeight();
ratio = (new Integer(width)).doubleValue() / bi.getWidth();
AffineTransformOp op = new AffineTransformOp(AffineTransform
.getScaleInstance(ratio, ratio), null);
itemp = op.filter(bi, null);
if (bb) {//补白
BufferedImage image = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
Graphics2D g = image.createGraphics();
g.setColor(Color.white);
g.fillRect(0, 0, width, height);
if (width == itemp.getWidth(null))
g.drawImage(itemp, 0, (height - itemp.getHeight(null)) / 2,
itemp.getWidth(null), itemp.getHeight(null),
Color.white, null);
g.drawImage(itemp, (width - itemp.getWidth(null)) / 2, 0,
itemp.getWidth(null), itemp.getHeight(null),
Color.white, null);
g.dispose();
ImageIO.write((BufferedImage) itemp, &JPEG&, new File(result));
} catch (IOException e) {
e.printStackTrace();
* 图像切割(按指定起点坐标和宽高切割)
* @param srcImageFile 源图像地址
* @param result 切片后的图像地址
* @param x 目标切片起点坐标X
* @param y 目标切片起点坐标Y
* @param width 目标切片宽度
* @param height 目标切片高度
public void cut(String srcImageFile, String result,
int x, int y, int width, int height) {
// 读取源图像
BufferedImage bi = ImageIO.read(new File(srcImageFile));
int srcWidth = bi.getHeight(); // 源图宽度
int srcHeight = bi.getWidth(); // 源图高度
if (srcWidth & 0 && srcHeight & 0) {
Image image = bi.getScaledInstance(srcWidth, srcHeight,
Image.SCALE_DEFAULT);
// 四个参数分别为图像起点坐标和宽高
// 即: CropImageFilter(int x,int y,int width,int height)
ImageFilter cropFilter = new CropImageFilter(x, y, width, height);
Image img = Toolkit.getDefaultToolkit().createImage(
new FilteredImageSource(image.getSource(),
cropFilter));
BufferedImage tag = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics g = tag.getGraphics();
g.drawImage(img, 0, 0, width, height, null); // 绘制切割后的图
g.dispose();
// 输出为文件
ImageIO.write(tag, &JPEG&, new File(result));
} catch (Exception e) {
e.printStackTrace();
//获得文件名字
public String getFileName(MultipartFile file, HttpServletRequest request,HttpSession session){
String FILE_PATH = session.getServletContext().getRealPath(&/&) + &upload&;
String fileName = file.getOriginalFilename();
String[] suffixNameArr = fileName.split(&\\.&);
String suffixName = suffixNameArr[suffixNameArr.length-1];
String userName = SecurityContextHolder.getContext().getAuthentication().getName();
return getTime() + userName+&.&+suffixN
//文件上传,返回文件路径
public String uploadFile(MultipartFile file, HttpServletRequest request,HttpSession session) throws IOException {
String FILE_PATH = session.getServletContext().getRealPath(&/&) + &upload&;
String fileName = getFileName(file,request,session);
File tempFile = new File(FILE_PATH, fileName);
if (!tempFile.getParentFile().exists()) {
tempFile.getParentFile().mkdir();
if (!tempFile.exists()) {
tempFile.createNewFile();
file.transferTo(tempFile);
//将上传文件写到服务器上指定的文件。
return FILE_PATH + &\\& + tempFile.getName();
/* public static File getFile(String fileName) {
return new File(FILE_PATH, fileName);
public String getTime(){
Date date = new Date();
SimpleDateFormat df = new SimpleDateFormat(&yyyyMMddHHmmss&);//设置日期格式
String nowTime = df.format(date).toString();
return nowT
这样就将图片要裁剪的图片路径返回页面展示
3.之后就是图片裁剪了，图片裁剪功能我找了好多插件，最后锁定jcrop，也是因为它的demo打动了我(太好看了),之后就是导入文件，至于这个裁剪工具具体的运用的话大家请参考这篇博文，当然这是被人写的非常好，还有api可以看，http://blog.csdn.net/xht555/article/details/ &在我这里，我在页面接收后台返回来的图片路径之后启用jcrop，也就是openJcrop（）方法，这样就可以加载jcrop插件了，具体大家想进一步了解这个裁剪工具，请到官网细细的研究，我就不再做过多的谈论了。
大家注意，在这里有个大坑，真的是大坑，就是重新选择图片的时候，被jcrop加载过的img的src是不能被修改的，这个当初卡了我好长时间，被jcrop加载一次jcrop就会生成一个自己的编辑对象（我自己的理解），这时候就和原来的img没有关系了，直到最后细细研究api才找到了一个方法，唯一的方法就是将这个jcrop销毁，就是jcrop_api.destroy(),这个有很大的学问，我就提示一点，就是将jcrop_api声明为全局变量，下面贴出js代码（和上边的html是在一个文件下）：
&script type=&text/javascript&&
$(function(){
var jcrop_
$(&#file_upload&).change(function() {
$(&#msg&).text('');
var oFile = $(this)[0].files[0];
//判断上传文件大小
if (oFile.size & 1*) {
$(&#msg&).text('你选择了太大的文件，请选择一个1M以下的图像文件').css('color','red');
$(this).val(&&);
//判断类型
var filepath=$(this).val();
var extStart=filepath.lastIndexOf(&.&);
var ext=filepath.substring(extStart,filepath.length).toUpperCase();
if(ext!=&.JPEG&&&ext!=&.PNG&&&ext!=&.JPG&){
$(&#msg&).text('请选择一个有效的图像文件(jpg,png是允许的)').css('color','red');
$(this).val(&&);
$(&#fileUp&).ajaxSubmit({
type: &POST&,
url:&/file/img/upload&,
dataType: &json&,
contentType:&application/json&,
success: function(parameter){
$(&#target2&).attr('src','/upload/'+parameter.fileName);
$(&#filePathInput&).val('/upload/'+parameter.fileName);
if($(&#format&).text()==&重新上传&){
jcrop_api.destroy()
$(&#format&).text(&重新上传&);
//启动jcrop支持
openJcrop('/upload/'+parameter.fileName);
error : function(data) {
alert(&ajax传输发生错误！！！&);
function photoSummit(){
//alert($(&#w&).val()+&,&+$(&#h&).val()+&,&+$(&#x&).val()+&,&+$(&#y&).val());
//$(&#fileUp&).attr(&action&, &/file/img/upload&).submit();
if($(&#w&).val()&0 && $(&#h&).val()&0){
$(&#fileUp&).ajaxSubmit({
type: &POST&,
url:&/file/img/cutandscale&,
dataType: &json&,
contentType:&application/json&,
success: function(data){
$(&#msg&).text('上传头像成功！！！').css('color','red');
//alert($(&#filePathInput&).val());
window.parent.back($(&#filePathInput&).val());
error : function(data) {
alert(&ajax传输发生错误！！！&);
$(&#msg&).text('请用鼠标截取图片').css('color','red');
//启动jcrop
function openJcrop(imgPath){
//启动jcrop支持
var boundx,boundy,
xsize = $('#preview-pane .preview-container').width(),
ysize = $('#preview-pane .preview-container').height();
$('#target').Jcrop({
minSize: [110, 110],
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: xsize / ysize
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
jcrop_api =
jcrop_api.setImage(imgPath);
function updatePreview(c)
if (parseInt(c.w) & 0)
var rx = xsize / c.w;
var ry = ysize / c.h;
$('#preview-pane .preview-container img').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
$(&#w&).val(c.w);
$(&#h&).val(c.h);
$(&#x&).val(c.x);
$(&#y&).val(c.y);
这样我们就完成了编辑功能，之后我们点击提交就会将w,h,x,y参数传到后台，这个whxy表示我用一个在网上下载的图片来表示：
4.传到后台之后的代码在上面我已经贴出，不做过多解释，大家自己理解，不懂的可以给我留言
整篇博文纯手打，如果大家觉得幼稚的借鉴的地方请给个赞，工作时候抽出时间比较难，但还是谢了这篇博文，如果谁发现bug或者不对的地方请随时联系我，大家互相交流提高。
本文已收录于以下专栏：
相关文章推荐
一般上传图片分三步：
第一步：将原始图片上传到服务器端保存，不妨命名为src.jpg
第二步：在浏览器端将src.jpg显示出来，然后使用jQuery,对其进行“客户端剪切”。
        ...
由于前端是不能直接操作本地文件的，要么通过用户点击选择文件或者拖拽的方式，要么使用flash等第三方的控件，但flash日渐衰落，所以使用flash还是不提倡的。同时html5崛起，提供了很多的api...
使用jcrop插件手机要裁剪图片的坐标
将收集到的参数传递到后台，在后台使用java图形对象绘制图像进行裁剪
后台处理流程：
1、将上传的图片按按照比例进行压缩后上传到文件服务器，并且将...
jQuery与Java实现图片的剪切
博客分类：
J2EEJqueryJavaJSP
一 参考资料
1 jquery Jcrop 头像，logo截图 
http://terje...
Jcrop是一个jQuery图片裁剪插件，它能为你的WEB应用程序快速简单地提供图片裁剪的功能。特点如下：对所有图片均unobtrusively（无侵入的，保持DOM简洁）；支持宽高比例锁定；支持mi...
头像上传裁剪预览功能-java
在很多的网站都可以实现上传头像，可以选择自己喜欢的图片做头像，从本地上传，下次登录时可以直接显示出已经上传的头像，那么这个是如何实现的呢？
下面说一下我的实现过程(只是个人实现思路，实际网站怎么实...
前台用javaScript，后台用java裁剪图片 
总体思想：
1.前台网页用js得到裁剪图片的id及x,y，宽度和高度。
2.服务端根据id取出要裁剪的图片 。
3.根据这些参数来生成...
开发环境：jdk1.7，MyEclipse10
框架用的是spring。用到了maven工具（maven的包百度下就可以）第一步、先在Spring中对图片进行限制
&bean id=...
他的最新文章
讲师：吴岸城
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)}