将图片以BASE64式存入，将BASE64图片显示在网页上

来源：互联网发布：轩辕剑崆峒印进阶数据编辑：程序博客网时间：2024/05/21 14:52

HTML(因为我想获取控制层返回值所以用了):

<form  method="POST" enctype="multipart/form-data" id="imgupload">  <br>请选择图片：<input id="imgfile" name="imgfile" size="80" type="file"><input name="upload" type="button" value="开始导入" onclick="checkform();"/>                                                                                        </form>图片:<img src="" id="img1" class='file-preview-image' width="100px" height="100">

JS(获取控制层返回值所以用了ajaxSubmit提交表单,需要导入<script type="text/javascript" src="<%=request.getContextPath()%>/PAGE/js/jquery.form.js"></script>):

$('#imgupload').ajaxSubmit({     type: 'post',     url:"upload/imgImport",     dataType:"json",     error:function(result){          console.log(result);     },     success:function(result){          console.log(result);          var  data=result.message;          $('#img1').attr("src","data:image/jpg;base64,"+data);//这里是对传到页面的base64操作                        }  });

控制层:

@Controller@RequestMapping("/upload")public class UploadController {@Autowiredprivate UploadService uploadService;static BASE64Encoder encoder = new sun.misc.BASE64Encoder();   static BASE64Decoder decoder=new BASE64Decoder();@RequestMapping(value = "/imgImport")@ResponseBodyprotected JsonResult uploadXmInfo(HttpServletRequest req,HttpServletResponse res) throws Exception {   // 转型为MultipartHttpRequest：   MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) req;   // 获得文件：   MultipartFile file = multipartRequest.getFile("imgfile");   byte[] array = new byte[1024];   array=file.getBytes();   String len=encoder.encode(array);//比特转换为BASE64String   System.out.println("len"+len);   return new JsonResult(1,len);}

效果显示：

1.选择文件

2.开始导入

3.页面显示图片

===================================================================

参考:http://blog.csdn.net/u010727398/article/details/53780736

0 0