[jQuery+Html5]上传图片预览Image

使用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;
    }