本文介绍了Base64编码在图片上传中的应用，包括其将文件转码后增大1.5倍的特性，通常用于单图片直接入库操作。提供了一个前端JSP页面的示例代码，展示了如何通过FileReader接口读取图片并转换为Base64字符串，以及使用jQuery进行AJAX提交。后端使用SpringMVC接收Base64字符串并进行处理。
base64优缺点简介：
1：base64在对图片等文件进行转码后的大小是原来的1.5倍左右。
2：一般我们都是用base64进行单图片上传，直接入库的操作（单独的图片库）
3：base64在特殊情况下也可进行多图片传输（图片内存总和小于2MB）
前端jsp完整代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><base href="<%=basePath%>"></head>
<body>
<div class="myFeedback">
<!-- 获取文件 -->
<p class="imgProve">
<input type="file" />
<img src=""/>
</p>
<!-- 单击事件 -->
<p class="submit"> 提交异议</p>
</div>
</body>
<script src="inc/jquery-1.8.3.js"></script>
<script type="text/javascript">
(function($) {
//执行获取图片文件
$('.myFeedback .imgProve input').change(function(){
var reader = new FileReader();
reader.readAsDataURL(this.files[0]);
reader.onload = function(e) {
$('.myFeedback .imgProve img').attr('src', this.result);
}
})
//提交触发ajax
$('body').on('click','.myFeedback .submit',function(){
var formDate = {};
formDate.imgProve = $('.imgProve img').attr('src');
$.ajax({
type: "POST",
url: "SpringMVC/upload3",
data: { formDatas: JSON.stringify(formDate) },
success: function(data) {}
})
})
}(jQuery));
</script>
</html>
后端代码：
@RequestMapping(value = "upload3",method = RequestMethod.POST)
@ResponseBody
public void filesUpload3(HttpServletResponse response,
@RequestParam("formDatas") String t
) throws IOException{
JSONObject j1 = JSONObject.fromObject(t);
System.out.println("j1="+j1);
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
