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

最新推荐文章于 2025-06-18 11:55:20 发布

Foolish_nick

最新推荐文章于 2025-06-18 11:55:20 发布

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： Utils 文章标签： jsp html base64 图片

本文链接：https://blog.youkuaiyun.com/qq_20867981/article/details/71601283

Utils 专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何将图片转换为Base64编码并存入数据库，然后通过HTML和JavaScript在网页上显示这些Base64编码的图片。使用了jsp、html和ajaxSubmit方法进行前后端交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.选择文件