一、前端:
<input type="file" id="myImage" name="myImage"/>
- 1
- 1
<script type="text/javascript">
$("#myImage").bind("change",function(){
uploadFile($(this));
});
//通过onChange直接获取base64数据
q function uploadFile(file){
var f = file.files[0];
var reader = new FileReader();
reader.onload = function(){
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()){
}else{
alert("您的浏览器不支持");
}
};
reader.onerror = function(){
console.log("上传失败了 ");
}
reader.readAsDataURL(f);
}
//ajax异步上传
function ajaxUploadBase64File(base64Data){
var url = window.location.protocol + '//' + window.location.host + "/register/uploadBase64";
$.ajax({
url:url,
type:"post",
data:{base64Data:base64Data},
dataType:"json",
success:function(data){
if(data.success == true){
console.log("上传成功");
}else{
console.log("上传失败");
}
},
error:function(){
console.log("上传失败");
}
});
};
//是否支持canvas
function isCanvasSupported(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
};
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
二、后台:
@RequestMapping(value="/uploadBase64",method=RequestMethod.POST)
@ResponseBody
public ActionResult<Map<String,String>> base64UpLoad(@RequestParam String base64Data, HttpServletRequest request, HttpServletResponse response){
ActionResult<Map<String,String>> result = new ActionResult<Map<String,String>>();
try{
logger.debug("上传文件的数据:"+base64Data);
String dataPrix = "";
String data = "";
logger.debug("对数据进行判断");
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("上传失败,数据不合法");
}
}
logger.debug("对数据进行解析,获取文件名和流数据");
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 = getRandomFileName() + suffix;
logger.debug("生成文件名为:"+tempFileName);
//因为BASE64Decoder的jar问题,此处使用spring框架提供的工具包
byte[] bs = Base64Utils.decodeFromString(data);
try{
//使用apache提供的工具类操作流
FileUtils.writeByteArrayToFile(new File(Global.getConfig(UPLOAD_FILE_PAHT), tempFileName), bs);
}catch(Exception ee){
throw new Exception("上传失败,写入文件失败,"+ee.getMessage());
}
Map<String,String> map =new HashMap<String,String>();
map.put("tempFileName", tempFileName);
result.setResultMessage("上传成功");
result.setData(map);
logger.debug("上传成功");
}catch (Exception e) {
logger.debug("上传失败,"+e.getMessage());
result.setSuccess(false);
result.setResultMessage("上传失败,"+e.getMessage());
}
return result;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
参考:
Base64编码与图片互转、
JAVA 把base64图片数据转为本地图片、
如何把图片转换成base64在后台转换成图片放在本地
一、前端:
<input type="file" id="myImage" name="myImage"/>
- 1
- 1
<script type="text/javascript">
$("#myImage").bind("change",function(){
uploadFile($(this));
});
//通过onChange直接获取base64数据
q function uploadFile(file){
var f = file.files[0];
var reader = new FileReader();
reader.onload = function(){
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()){
}else{
alert("您的浏览器不支持");
}
};
reader.onerror = function(){
console.log("上传失败了 ");
}
reader.readAsDataURL(f);
}
//ajax异步上传
function ajaxUploadBase64File(base64Data){
var url = window.location.protocol + '//' + window.location.host + "/register/uploadBase64";
$.ajax({
url:url,
type:"post",
data:{base64Data:base64Data},
dataType:"json",
success:function(data){
if(data.success == true){
console.log("上传成功");
}else{
console.log("上传失败");
}
},
error:function(){
console.log("上传失败");
}
});
};
//是否支持canvas
function isCanvasSupported(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
};
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
二、后台:
@RequestMapping(value="/uploadBase64",method=RequestMethod.POST)
@ResponseBody
public ActionResult<Map<String,String>> base64UpLoad(@RequestParam String base64Data, HttpServletRequest request, HttpServletResponse response){
ActionResult<Map<String,String>> result = new ActionResult<Map<String,String>>();
try{
logger.debug("上传文件的数据:"+base64Data);
String dataPrix = "";
String data = "";
logger.debug("对数据进行判断");
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("上传失败,数据不合法");
}
}
logger.debug("对数据进行解析,获取文件名和流数据");
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 = getRandomFileName() + suffix;
logger.debug("生成文件名为:"+tempFileName);
//因为BASE64Decoder的jar问题,此处使用spring框架提供的工具包
byte[] bs = Base64Utils.decodeFromString(data);
try{
//使用apache提供的工具类操作流
FileUtils.writeByteArrayToFile(new File(Global.getConfig(UPLOAD_FILE_PAHT), tempFileName), bs);
}catch(Exception ee){
throw new Exception("上传失败,写入文件失败,"+ee.getMessage());
}
Map<String,String> map =new HashMap<String,String>();
map.put("tempFileName", tempFileName);
result.setResultMessage("上传成功");
result.setData(map);
logger.debug("上传成功");
}catch (Exception e) {
logger.debug("上传失败,"+e.getMessage());
result.setSuccess(false);
result.setResultMessage("上传失败,"+e.getMessage());
}
return result;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
参考:
Base64编码与图片互转、
JAVA 把base64图片数据转为本地图片、
如何把图片转换成base64在后台转换成图片放在本地