使用cropbox.js+jquery.js+servlet实现图片的上传下载
采用cropbox.js+jqueryajax + servlet实现图片的上传下载
原理解释：
利用javascript的内置对象FileReader读取计算机中的文件。
读取的文件会被转化为base64编码的字符串，此后通过jquery ajax将文件字符串发送到servlet，servlet接收到字符串之后，通过base64进行解码操作。重新构造图片文件，并将文件存入存储器中。
js代码详情：
var reader = new FileReader();
为创建的FilReader对象绑定load事件，监听reader读取数据是否成功。
reader.οnlοad= function(e) {
//e.target.result获取到的是base64编码
options.imgSrc =e.target.result;
cropper = new cropbox(options);
}
//当FileReader对象通过readAsDataURL读取数据成功后，就会触发load事件，target中的result属性的值就是该文件的base64数据
reader.readAsDataURL(this.files[0]);
//剪裁
document.querySelector('#btnCrop').addEventListener('click', function(){
var img = cropper.getDataURL();//这里cropper是创建的cropbox.js中的cropbox对象，调用了getDateURL()方法获得图片的base64编码字符串
document.querySelector('.cropped').innerHTML += '<img src="'+img+'">';
$.ajax({
method : 'post',
url : "/study/servlet/uploadImgServlet",
type:"text",
data: {"img":img},
success:function(data){
$("#showImage").html('<img src="'+data+'">');
},
error:function(error){
alert(error);
}
});
})
后台代码详情：
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PrintWriter writer = response.getWriter();
String imgString = request.getParameter("img");
String im = processImgStr(imgString);
System.out.println(imgString);
System.out.println(im);
String path = "E:\\javaEE生成文件\\dd.jpg";
generatorImage(im,path);
String imgHeader = "data:image/png;base64,";
writer.write(imgHeader + getImageStr(path));
writer.flush();
writer.close();
}
/**
* @Description: 将base64编码字符串转换为图片
* @Author:
* @CreateTime:
* @param imgStr base64编码字符串
* @param path 图片路径-具体到文件
* @return
*/
public String processImgStr(String imgStr){
int headIndex = imgStr.indexOf(',') + 1;
return imgStr.substring(headIndex);
}
public boolean generatorImage(String imgStr,String filePath){
if(imgStr==null){
return false;
}
else {
BASE64Decoder decoder = new BASE64Decoder();
try {
//解密过程
byte[] imgByte = decoder.decodeBuffer(imgStr);
//处理数据
for(int i = 0; i < imgByte.length; i ++){
if(imgByte[i] < 0){
imgByte[i] += 256;
}
}
OutputStream out = new FileOutputStream(filePath);
//将图片存放入文件
out.write(imgByte);
out.flush();
out.close();
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
}
/**
* @Description: 根据图片地址转换为base64编码字符串
* @Author:
* @CreateTime:
* @return
*/
public String getImageStr(String imgFile) {
InputStream inputStream = null;
byte[] data = null;
try {
inputStream = new FileInputStream(imgFile);
data = new byte[inputStream.available()];
inputStream.read(data);
inputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
// 加密形成base64编码字符串
BASE64Encoder encoder = new BASE64Encoder();
return encoder.encode(data);
}