图片使用base64图片数据格式上传(后台使用springMVC)
来源:互联网 发布:西游记 知乎 编辑:程序博客网 时间:2024/05/17 07:30
一、前台JSP页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %><c:set var="ctx" value="${pageContext.request.contextPath}" /><!DOCTYPE html><html> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><title>文件上传</title><script type="text/javascript" src="${ctx}/js/jquery-2.1.4/jquery-2.1.4.js"></script><script type="text/javascript"> //通过FileReader.readAsDataURL获取base64数据 function uploadFile(file){ var f = document.getElementById("myImage").files[0]; var reader = new FileReader(); //新建一个FileReader reader.readAsDataURL(f); // 读取文件base64数据 reader.onload = function(e){ //数据读取完成产生onload事件 var data = e.target.result; //获取数据 if (data.lastIndexOf('data:base64') != -1) { data = data.replace('data:base64', 'data:image/jpeg;base64'); } else if (data.lastIndexOf('data:,') != -1) { data = data.replace('data:,', 'data:image/jpeg;base64,'); } if(isCanvasSupported()){ ajaxUploadBase64File(data); }else{ alert("您的浏览器不支持"); } }; reader.onerror = function(){ console.log("上传失败了 "); } } //ajax异步上传 function ajaxUploadBase64File(base64Data){ var url = "${ctx}/upload/uploadBase64"; $.ajax({ url:url, type:"post", data:{base64Data:base64Data}, success:function(data){ if(data == "success"){ alert("上传成功"); }else{ alert("上传失败"); } }, error:function(){ alert("上传失败"); } }); }; //是否支持canvas function isCanvasSupported(){ var elem = document.createElement('canvas'); return !!(elem.getContext && elem.getContext('2d')); }; </script></head><body> <input type="file" id="myImage" name="myImage"/> <input type="button" onclick="uploadFile();" value="上传"></body></html>
二、后台Controller
package org.nercita.bcp.upload;import java.io.File;import java.io.IOException;import java.io.PrintWriter;import java.util.UUID;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.commons.io.FileUtils;import org.springframework.stereotype.Controller;import org.springframework.util.Base64Utils;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.commons.CommonsMultipartFile;@Controllerpublic class UploadController { @RequestMapping("/upload/uploadImage") public String uploadImagePage(){return "/upload/uploadImage"; } @RequestMapping(value="/upload/uploadBase64",method=RequestMethod.POST) @ResponseBody public String base64UpLoad(@RequestParam String base64Data, HttpServletRequest request, HttpServletResponse response){ try{ String dataPrix = ""; String data = ""; if(base64Data == null || "".equals(base64Data)){ throw new Exception("上传失败,上传图片数据为空"); }else{ String [] d = base64Data.split("base64,"); if(d != null && d.length == 2){ dataPrix = d[0]; data = d[1]; }else{ throw new Exception("上传失败,数据不合法"); } } String suffix = ""; if("data:image/jpeg;".equalsIgnoreCase(dataPrix)){//data:image/jpeg;base64,base64编码的jpeg图片数据 suffix = ".jpg"; } else if("data:image/x-icon;".equalsIgnoreCase(dataPrix)){//data:image/x-icon;base64,base64编码的icon图片数据 suffix = ".ico"; } else if("data:image/gif;".equalsIgnoreCase(dataPrix)){//data:image/gif;base64,base64编码的gif图片数据 suffix = ".gif"; } else if("data:image/png;".equalsIgnoreCase(dataPrix)){//data:image/png;base64,base64编码的png图片数据 suffix = ".png"; }else{ throw new Exception("上传图片格式不合法"); } String tempFileName = UUID.randomUUID().toString() + suffix; //因为BASE64Decoder的jar问题,此处使用spring框架提供的工具包 byte[] bs = Base64Utils.decodeFromString(data); try{ //使用apache提供的工具类操作流 System.out.println(request.getServletContext().getRealPath("/upload")); FileUtils.writeByteArrayToFile(new File(request.getServletContext().getRealPath("/upload"), tempFileName), bs); }catch(Exception ee){ throw new Exception("上传失败,写入文件失败,"+ee.getMessage()); } return "success"; }catch (Exception e) { return "error"; } }}
本文使用的是FileRead的readAsDataURL获取base64的图片编码数据,通常我们 使用canvas画布在html的dom元素中所绘的图行,也可以使用 canvas的toDataUrl转换成base64编码的图片数据进行上传,具体获取方式如下:
var mycanvas = document.getElementById("mycanvas"); var imageBase64Data = mycanvas.toDataURL("image/png");
阅读全文
0 0
- 图片使用base64图片数据格式上传(后台使用springMVC)
- 结合springmvc,使用ajax上传base64图片数据
- 结合springmvc,使用ajax上传base64图片数据
- 结合springmvc,使用ajax上传base64图片数据
- springmvc使用ssi-uploader批量上传图片及后台接受
- springmvc使用ssi-uploader批量上传图片及后台接受
- java 使用SpringMVC上传图片
- 使用base64进行移动端图片上传
- 使用Base64上传图片到服务器
- 在Android中使用Base64上传图片
- 微信小程序上传图片到服务器(java后台以及使用springmvc)
- 使用WebUploader客户端批量上传图片,后台使用springMVC接收实例
- 使用WebUploader客户端批量上传图片,后台使用springMVC接收实例
- Android Base64上传图片到 SpringMVC服务器
- Android Base64上传图片到 SpringMVC服务器
- iOS 图片上传使用base64或者二进制流上传头像
- iOS 图片上传使用base64或者二进制流上传头像
- android使用json数据格式同时上传图片和文本
- 1253:Dungeon Master(2.5基本算法之搜索)
- jquery 判断js中是否包含字符串
- Excel潜能系列——Excel游戏 2048
- 平均随机数的封装类
- Java面试2 ,3事(一)
- 图片使用base64图片数据格式上传(后台使用springMVC)
- 解决maven项目不会预读xml文件,Invalid bound statement (not found): com.starry.dao.IUserDao.selAll
- 戴凌龙, MIMO, OFDM, 5G
- Android--adb命令查看第三方应用包名、应用activity名
- 快速排序和归并排序算法
- linux 磁盘满了,查看文件大小
- C#学习回顾笔记一:C#的Console.WriteLine()
- QGC之MissionController
- 函数对象与函数指针