使用jQuery+Html5实现前端上传图片后,无须上传至后台,回显到image中。
Html中需要的两个组件:
- input file
- img
JS代码
var upfile = document.querySelector(file的ID);
if(!/image\/\w+/.test(upfile.files[0].type)){
alert("文件必须为图片!");
return false;
}
var fileReader = new FileReader();
fileReader.onload = function(evt){
if(FileReader.DONE==fileReader.readyState){
//this.result为图片的Base64编码
$(图片的id选择器).attr('src',this.result);
}
}
fileReader.readAsDataURL(upfile.files[0]);
Java后台处理,将Base64编码字符转为图片,并且存入至服务器。
注 : 图片会存放至服务器根目录remarkImage文件夹中。
/**
* 根据传入的Base64压缩后的编码,反向生成图片,存入服务器,并且返回html img标签字符串
* @param remark
* @param request
* @return
*/
public static String createRemarks(String remark , HttpServletRequest request){
if(remark==null||"".equals(remark)){
return null;
}
String[] split = remark.split(",");
String start = "<p>";
StringBuffer center = new StringBuffer() ;
for(String rem : split){
//绝对路径-生成图片用的绝对路径
String path = request.getServletContext().getRealPath("/remarkImage");
String imageName = UUID.randomUUID().toString() + ".jpg";
String imagePath = path+"\\"+imageName;
boolean generateImage = generateImage(rem,imagePath);
//虚拟路径-img回显时用的虚拟路径
String contextPath = request.getServletContext().getContextPath();
contextPath = contextPath+"/remarkImage/"+imageName;
if(generateImage){
String createHtmlImage = createHtmlImage(contextPath);
center.append(createHtmlImage);
}
}
String end = "</p>";
String string = start + center.toString() + end;
return string;
}
/**
* 创建一个HTML编码的图片标签
* @return
*/
public static String createHtmlImage (String imageSrc){
String image = "<img src=\""+imageSrc+"\" />";
return image;
}