您的位置:首页 > 其它

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

2017-05-11 10:25 204 查看
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 {
@Autowired
private UploadService uploadService;
static BASE64Encoder encoder = new sun.misc.BASE64Encoder();
static BASE64Decoder decoder=new BASE64Decoder();
@RequestMapping(value = "/imgImport")
@ResponseBody
protected 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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: