本方法的思路是：先在前端利用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. C /C++ 语言练习册

    /************************************** 整数对应 32 bit 二进制数串中数字1的个数 2016-10-24 liukun ***************** ...

  2. pip安装使用详解(转)

    pip类似RedHat里面的yum,安装Python包非常方便.本节详细介绍pip的安装.以及使用方法. 1.pip下载安装 1.1 pip下载   1 # wget "https://py ...

  3. 【poj3744】 Scout YYF I

    http://poj.org/problem?id=3744 (题目链接) 题意 给出n个雷,分别在 a[1]...a[n] ,走一步概率为 p ,走两步概率为 1-p ,一开始在 1 号位置,问安全 ...

  4. MapControl图层删除或添加触发监听事件

    监听MapControl中对于图层添加和删除的事件 IActiveViewEvents_Event m_MapActiveViewEvents = m_mapControl.Map as IActiv ...

  5. EntityFramework错误：Unable to update the EntitySet because it has a DefiningQuery

    错误截图: 解决方法: 在所操作的数据库表中添加一个主键即可解决此问题

  6. List集合及子类

    List集合特点:有序(存储和取出的元素一致):可重复 1.添加功能 void add(int index,Object element):在指定位置添加元素 2.获取功能 Object get(in ...

  7. TomCat的安装与配置方法

    经过自己的研究,各种烦,所以要写个博客,帮助大家安装这个软件. 一.安装TomCat(因为大家都安装了jdk,所以就不写了) 1.下载TomCat 网址如下:http://tomcat.apache. ...

  8. Struts2--属性设置方式

    Struts2自动获取/设置数据的方式一共分为两种 属性驱动(FieldDriven) 模型驱动(ModelDriven) 属性驱动 属性又分为两种: |- 基本数据类型 |- JavaBean属性类 ...

  9. 常用function() 收集

    1.随机数生成函数(来源-微信支付demo案例) /** * * 产生随机字符串,不长于32位 * @param int $length * @return 产生的随机字符串 */ public st ...

  10. phpstorm 使用技巧

    专题1 专题2 专题3 专题4 快捷键