本方法的思路是：先在前端利用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. CSS清除浮动float方法总结

    使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...

  2. 读取TDrawGrid之获取博易数据

    朋友叫我帮忙写个从博易读取数据的工具,可无奈数据所在控件并不是Windows标准控件,也就是说没办法通过发送系统消息来获取 相关数据,于是乎试了一下从内存直接读取,可最后并不能达到预期目的,原因是笔者 ...

  3. 逻辑回归 Logistic Regression

    逻辑回归(Logistic Regression)是广义线性回归的一种.逻辑回归是用来做分类任务的常用算法.分类任务的目标是找一个函数,把观测值匹配到相关的类和标签上.比如一个人有没有病,又因为噪声的 ...

  4. 好用的wget命令从下载添加环境变量到各参数详解

    本文是因为(笔者使用的windows系统)使用过好几次wget后,始终存在各种细节问题,于是下定决定细致的研究一下,并记录下其中细节. 下载与安装 第一步:下载wget,网络地址:http://dow ...

  5. C#面向对象设计模式纵横谈——2.Singleton 单件(创建型模式)

    一:模式分类 从目的来看: 创建型(Creational)模式:负责对象创建. 结构型(Structural)模式:处理类与对象间的组合. 行为型(Behavioral)模式:类与对象交互中的职责分配 ...

  6. Javascript JQuery获取当前元素的兄弟元素/上一个/下一个元素（转）

    var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得s的下一个 ...

  7. maven上传jar到nexus本地仓库

    一.nexus新增本地仓库 Hosted Repository:本地仓库,部署组织内部的版本内容 Proxy Repository:代理仓库,代理远程的公共仓库,如maven中央仓库 Virtual ...

  8. FlumeNG 笔记

    环境:CentOS6.6 64位 + FlumeNG 1.6 请参考推荐文档: Flume-ng的原理和使用 - JunezChen Blog - SegmentFault  https://segm ...

  9. JavaScript中事件和属性有什么区别吗？或者说事件与方法有什么区别？

    https://zhidao.baidu.com/question/1691946187489353788.html

  10. mysql中Invalid default value for 'stime'问题

    在执行mysql数据库时报错 CREATE TABLE `advert_schedule_time` ( `advert_id` int(11) NOT NULL DEFAULT '0' COMMEN ...