本方法的思路是：先在前端利用FileReader将图片转换成base64编码，然后将编码字符串形式传递到后台（前提是服务端设置了允许跨域），后端再把base64编码转换成图片。

前端代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
<input type="file" name="file" id="file">
<img id="testImg" style="max-height: 300px; height: 8em; min-width:8em;">
<textarea id="testArea" style="display: block; width: 100%;height: 30em;"></textarea>
<input id="btnTest" type="button" value="提交base" />
<script type="text/javascript">
$(function() {
//点击图片上传方法
$("#btnTest").click(function () {
var fileName = $("#file").val();
var imageType = fileName.substring(fileName.length - 3);
var imgData = $("#testArea").val();
var index = imgData.indexOf("base64,");
var imageContent = imgData.substring(index + 7);
if (ss == "jpg" || ss == "png" || ss == "gif"||ss=="bmp") {
$.ajax({
url: "http://127.0.0.1:8080/uploadPic",
type: "post",
dataType: "json",
data: {"userid" : 1224,
"imageContents" : imageContent,
"imageType" : imageType
},
async: false,
success: function (result) {
}
});
}
});

//选择图片方法
$("#file").change(function(){
run(this, function (data) {
$('#testImg').attr('src', data);
$('#testArea').val(data);
});
});

/*将选择的图片转换成base64*/
/*input_file：文件按钮对象*/
/*get_data: 转换成功后执行的方法*/
function run(input_file, get_data) {
/*input_file：文件按钮对象*/
/*get_data: 转换成功后执行的方法*/
if (typeof (FileReader) === 'undefined') {
alert("抱歉，你的浏览器不支持 FileReader，不能将图片转换为Base64，请使用现代浏览器操作！");
} else {
try {
/*图片转Base64 核心代码*/
var file = input_file.files[0];
//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
if (!/image\/\w+/.test(file.type)) {
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.onload = function () {
get_data(this.result);
}
reader.readAsDataURL(file);
} catch (e) {
alert('图片转Base64出错啦！' + e.toString())
}
}
}
});
</script>
</body>
</html>

后台就是标准的springmvc代码

/**
* 保存上传图片，返回上传图片名称(不包含格式)
* @param file
* @return 图片路径
* @throws FileNotFoundException
* @throws IOException
*/
@RequestMapping(value = "/uploadPic")
@ResponseBody
public Object upload(@RequestParam("imageContents") String imgStr, @RequestParam("imageType") String imgType, @RequestParam("userid") int userid) {
try {
/* String imgFile = "F://image//Koala.jpg";// 待处理的图片
InputStream in = null;
byte[] data = null;
//读取图片字节数组
try
{
in = new FileInputStream(imgFile);
data = new byte[in.available()];
in.read(data);
in.close();
}
catch (IOException e)
{
e.printStackTrace();
}
//对字节数组Base64编码
BASE64Encoder encoder = new BASE64Encoder();
String localImgStr = encoder.encode(data);//返回Base64编码过的字节数组字符串
if (localImgStr.equals(imgStr)) {
System.out.println("一样");
} else {
System.out.println("不一样");
}*/
/********************************************************/
//设定本地路径
String realPath = System.getProperty("user.dir");
realPath += "//temp" + "." + imgType;
byte[] b = Base64.decodeBase64(new String(imgStr).getBytes());
for(int i=0;i<b.length;++i)
{
if(b[i]<0)
{//调整异常数据
b[i]+=256;
}
}
//生成图片
OutputStream out = new FileOutputStream(realPath);
out.write(b);
out.flush();
out.close();
/* String usericon = systemService.uploadPic(realPath);*/
User user = new User();
user.setId(userid);
user.setUsericon("1111");
userService.updateByPrimaryKeySelective(user);
//更新数据库
} catch (IOException e) {
e.printStackTrace();
return false;
}
return true;
}

springmvc结合ajax实现跨域上传文件的更多相关文章

  1. Angular4 后台管理系统搭建（10） - 做一个通用的可跨域上传文件的组件

    写的很慢,不知不觉这是第十篇了.但是我其他事情太多,只能抽空写下.现在angular4或angular2流行的上传方式是ng2-file-upload.它的功能很强大.但是我没有配置成可以跨域上传的. ...

  2. js跨域上传文件 iframe

    封装好的jq插件 (function () { var iframe = '<iframe name="jqUploadIframe" style="display ...

  3. iframe无刷新跨域上传文件并获取返回值

    通常我们会有一个统一的上传接口,这个接口会被其他的服务调用.如果出现不同域,还需要无刷新上传文件,并且获取返回值,这就有点麻烦了.比如,新浪微博启用了新域名www.weibo.com,但接口还是使用原 ...

  4. iframe无刷新跨域上传文件并获得返回值

    原文:http://geeksun.iteye.com/blog/1070607 需求:从S平台上传文件到R平台,上传成功后R平台返回给S平台一个值,S平台是在一个页面弹出的浮窗里上传文件,所以不能用 ...

  5. asp.net跨域上传文件

    前端: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con ...

  6. [javascript] ajaxfileupload.js 跨域上传文件

    原文地址: http://www.ueffort.com/jqueryajaxfileupload-js-duo-wen-jian-shang-chuan-chuan-zhi-kua-yu/ 跨域 这 ...

  7. POST方式跨域上传文件

    JSONP请求有限制: 第一,不能跳出两层, 第二,不支持POST. 往往解决跨域POST请求的方案是个"古老"方法, 请求同域下的iframe. 服务器端:  需要附加头信息: ...

  8. springmvc跨域上传文件问题

    把以下文件放到webapps的root文件夹下: 1.clientaccesspolicy.xml <?xml version="1.0" encoding="ut ...

  9. html5上传图片(一)一跨域上传

    最近开发一个上传图片的模块,传图片的接口不支持跨域上传,并且只支持单张上传,而我们的产品要求要实现多张上传.我搞了一个代理页面,先将图片传到代理页面,然后再通过代理页面传到上传图片接口.虽然这种方式经 ...

随机推荐

  1. NCspider项目总结

    下午就要答辩了,想把项目经历再总结一下. 项目分三个阶段. 第一阶段,是信息搜集整理阶段 要想法设法从各个门户网站上抓取到新闻和对应的评论数据.首先要分析网站结构. 1. 从哪里找到网站每日发布的所有 ...

  2. 结构体内嵌函数指针实现C语言面向对象

    结构体内嵌函数指针 #include<stdio.h> void say(int age) { printf("我%d岁了\n",age); } struct stud ...

  3. MVC其实很简单(Django框架)

    Django框架MVC其实很简单 让我们来研究一个简单的例子,通过该实例,你可以分辨出,通过Web框架来实现的功能与之前的方式有何不同. 下面就是通过使用Django来完成以上功能的例子: 首先,我们 ...

  4. java-正则表达式过滤标签

    String str="one <a href=u.php?action=show&uid=122113 target=_blank>超链接文本</a> tw ...

  5. linux 压缩包覆盖问题

    最近提交代码自动化构建发布的时候,出现了之前被删除的代码还是被打包发布了的问题. 流程是这样,jenkins通过定时任务获取git的提交,检测到有新提交时,就把代码拉下来通过maven进行build. ...

  6. c++中的lambda特性

    来源: http://www.jb51.net/article/56147.htm cocos2dx3.0测试: 1.有参数a,b printf("lambda=%lf", []( ...

  7. css-列表或标题的多级计数

    利用css实现多级计数,比如1/1.1/1.1.1这种层层嵌套的计数,主要利用到counter-reset/counter-increment/counter/content/:before. 一.标 ...

  8. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

  9. AVA正则表达式4种常用功能

    正则表达式在字符串处理上有着强大的功能,sun在jdk1.4加入了对它的支持 下面简单的说下它的4种常用功能: 查询: String str="abc efg ABC";  Str ...

  10. ubuntu安装simplejson模块

    在terminal中输入 sudo apt-get install python-simplejson -y import simplejson print simplejson.dumps(lens ...