OK,搞定!你还须要做的,就是创建一个只管的用户界面,并同意你控制图片的大小。
上传到server端的数据,并不须要处理enctype为 multi-part/form-data 的情况,只一个简单的POST表单处理程序就能够了.
好了,以下附上完整的代码演示样例:
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
通过Canvas及File API缩放并上传图片// 參数,最大高度
var MAX_HEIGHT = 100;
// 渲染
function render(src){
// 创建一个 Image 对象
var image = new Image();
// 绑定 load 事件处理器,载入完毕后运行
image.onload = function(){
// 获取 canvas DOM 对象
var canvas = document.getElementById("myCanvas");
// 假设高度超标
if(image.height > MAX_HEIGHT) {
// 宽度等比例缩放 *=
image.width *= MAX_HEIGHT / image.height;
image.height = MAX_HEIGHT;
}
// 获取 canvas的 2d 环境对象,
// 能够理解Context是管理员,canvas是房子
var ctx = canvas.getContext("2d");
// canvas清屏
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 重置canvas宽高
canvas.width = image.width;
canvas.height = image.height;
// 将图像绘制到canvas上
ctx.drawImage(image, 0, 0, image.width, image.height);
// !!! 注意,image 没有增加到 dom之中
};
// 设置src属性。浏览器会自己主动载入。
// 记住必须先绑定事件,才干设置src属性,否则会出同步问题。
image.src = src;
};
// 载入 图像文件(url路径)
function loadImage(src){
// 过滤掉 非 image 类型的文件
if(!src.type.match(/image.*/)){
if(window.console){
console.log("选择的文件类型不是图片: ", src.type);
} else {
window.confirm("仅仅能选择图片文件");
}
return;
}
// 创建 FileReader 对象 并调用 render 函数来完毕渲染.
var reader = new FileReader();
// 绑定load事件自己主动回调函数
reader.onload = function(e){
// 调用前面的 render 函数
render(e.target.result);
};
// 读取文件内容
reader.readAsDataURL(src);
};
// 上传图片,jQuery版
function sendImage(){
// 获取 canvas DOM 对象
var canvas = document.getElementById("myCanvas");
// 获取Base64编码后的图像数据,格式是字符串
// "data:image/png;base64,"开头,须要在client或者server端将其去掉,后面的部分能够直接写入文件。
var dataurl = canvas.toDataURL("image/png");
// 为安全 对URI进行编码
// data%3Aimage%2Fpng%3Bbase64%2C 开头
var imagedata = encodeURIComponent(dataurl);
//var url = $("#form").attr("action");
// 1. 假设form表单不优点理,能够使用某个hidden隐藏域来设置请求地址
//
var url = $("input[name='action']").val();
// 2. 也能够直接用某个dom对象的属性来获取
//
// var url = $("#imageaction").attr("action");
// 由于是string,所以server须要对数据进行转码,写文件操作等。
// 个人约定。所有http參数名字所有小写
console.log(dataurl);
//console.log(imagedata);
var data = {
imagename: "myImage.png",
imagedata: imagedata
};
jQuery.ajax( {
url : url,
data : data,
type : "POST",
// 期待的返回值类型
dataType: "json",
complete : function(xhr,result) {
//console.log(xhr.responseText);
var $tip2 = $("#tip2");
if(!xhr){
$tip2.text('网络连接失败!');
return false;
}
var text = xhr.responseText;
if(!text){
$tip2.text('网络错误!');
return false;
}
var json = eval("("+text+")");
if(!json){
$tip2.text('解析错误!');
return false;
} else {
$tip2.text(json.message);
}
//console.dir(json);
//console.log(xhr.responseText);
}
});
};
function init(){
// 获取DOM元素对象
var target = document.getElementById("drop-target");
// 阻止 dragover(拖到DOM元素上方) 事件传递
target.addEventListener("dragover", function(e){e.preventDefault();}, true);
// 拖动并放开鼠标的事件
target.addEventListener("drop", function(e){
// 阻止默认事件,以及事件传播
e.preventDefault();
// 调用前面的载入图像 函数,參数为dataTransfer对象的第一个文件
loadImage(e.dataTransfer.files[0]);
}, true);
var setheight = document.getElementById("setheight");
var maxheight = document.getElementById("maxheight");
setheight.addEventListener("click", function(e){
//
var value = maxheight.value;
if(/^\d+$/.test(value)){
MAX_HEIGHT = parseInt(value);
}
e.preventDefault();
},true);
var btnsend = document.getElementById("btnsend");
btnsend.addEventListener("click", function(e){
//
sendImage();
},true);
};
window.addEventListener("DOMContentLoaded", function() {
//
init();
},false);
通过Canvas及File API缩放并上传图片
从目录拖动一张照片到下方的盒子里, canvas 和 JavaScript将会自己主动的进行缩放.
设置图片最大高度
上 传
缩略图:
服务端页面,receive.jsp
// 本文件:/receive.jsp
// 图片存放路径
String photoPath = "D:/blog/upload/photo/";
File photoPathFile = new File(photoPath);
// references: http://blog.csdn.net/remote_roamer/article/details/2979822
private boolean saveImageToDisk(byte[] data,String imageName) throws IOException{
int len = data.length;
//
// 写入到文件
FileOutputStream outputStream = new FileOutputStream(new File(photoPathFile,imageName));
outputStream.write(data);
outputStream.flush();
outputStream.close();
//
return true;
}
private byte[] decode(String imageData) throws IOException{
BASE64Decoder decoder = new BASE64Decoder();
byte[] data = decoder.decodeBuffer(imageData);
for(int i=0;i
{
if(data[i]<0)
{
//调整异常数据
data[i]+=256;
}
}
//
return data;
}
%>
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
//假设是IE,那么须要设置为text/html,否则会弹框下载
//response.setContentType("text/html;charset=UTF-8");
response.setContentType("application/json;charset=UTF-8");
//
String imageName = request.getParameter("imagename");
String imageData = request.getParameter("imagedata");
int success = 0;
String message = "";
if(null == imageData || imageData.length() < 100){
// 数据太短,明显不合理
message = "上传失败,数据太短或不存在";
} else {
// 去除开头不合理的数据
imageData = imageData.substring(30);
imageData = URLDecoder.decode(imageData,"UTF-8");
//System.out.println(imageData);
byte[] data = decode(imageData);
int len = data.length;
int len2 = imageData.length();
if(null == imageName || imageName.length() < 1){
imageName = System.currentTimeMillis()+".png";
}
saveImageToDisk(data,imageName);
//
success = 1;
message = "上传成功,參数长度:"+len2+"字符。解析文件大小:"+len+"字节";
}
// 后台打印
System.out.println("message="+message);
%>
{
"message": "",
"success":
}