最近都没时间整理资料了,一入职就要弄懂业务,整天被业务弄得血崩。

总结下今天弄了一个早上的跨域异步上传文件。主要用到技术有HTML5的FormData,AJAX,Spring MVC。

首先看下上传页面:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/plugins/jquery-1.8.3.min.js" ></script>
<title></title>
</head>
<body>
<input type="file" id="file_upload"/>
<input type="button" value="上传图片" id="upload"/>
</body>
<script type="text/javascript" src="js/upload.js" ></script>
</html>

上传页面很简单,就两个input元素。

然后看下upload.js。注意这个upload.js是自己写的,里面那个ajaxFileUpload并不是jQuery提供的那个上传插件的方法。

$(document).ready(function(){

    function ajaxFileUpload(){
var formData = new FormData();
formData.append('file',$("#file_upload")[0].files[0]); //将文件转成二进制形式
$.ajax({
type:"post",
url:"http://localhost:8080/nitshareserver/serve/fileupload",
async:false,
contentType: false, //这个一定要写
processData: false, //这个也一定要写,不然会报错
data:formData,
dataType:'text', //返回类型,有json,text,HTML。这里并没有jsonp格式,所以别妄想能用jsonp做跨域了。
success:function(data){
alert(data);
},
error:function(XMLHttpRequest, textStatus, errorThrown, data){
alert(errorThrown);
}
});
} $("#upload").click(function(){
ajaxFileUpload();
});
});

前端这样就可以了,接下来看看服务端的写法。

服务端接口写法:

//    @ResponseBody
@RequestMapping(value="fileupload", method=RequestMethod.POST,produces="text/html;charset=utf-8")
public void addPic(HttpServletResponse response,HttpServletRequest request,
@RequestParam(value="file", required=false) MultipartFile file) throws IOException{
System.out.println(file.getOriginalFilename());
response.getWriter().write("success");
response.setHeader("Access-Control-Allow-Origin", "*");
// return "success";
}

这里response.setHeader("Access-Control-Allow-Origin", "*");这句很重要,没有这句,前端接收不到返回的数据。Access-Control-Allow-Origin是HTML5中定义的一种服务器端返回Response header,用来解决资源(比如字体)的跨域权限问题。它定义了该资源允许被哪个域引用,或者被所有域引用(google字体使用*表示字体资源允许被所有域引用),但是在真正的产品中,是不会用*的。这里只是好方便演示。

那跑一下工程,看看前端会不会收到success吧。

结果:

服务端控制台:

转载注明出处:http://www.cnblogs.com/BigDreamer/

(H5)FormData+AJAX+SpringMVC跨域异步上传文件的更多相关文章

  1. Jquery~跨域异步上传文件

    先说明白 这个跨域异步上传功能我们借助了Jquery.form插件,它在异步表单方面很有成效,而跨域我们会在HTTP响应头上添加access-control-allow-method,当然这个头标记只 ...

  2. form上传文件以及跨域异步上传

    要设置了enctype属性才能上传,需要使用上传的jar包,这里使用的是cos-26Dec2008.jar, 而且后台获取值的时候,getfile要放在第一位 一次设置好上传格式后没有上传文件,也就没 ...

  3. asp.net 跨域服务器 上传文件

    最近一个项目遇到问题,公司局域网中,在F域下有个服务器Fa,我们的项目就部署在Fa.项目里面有个功能,需要把生成的文件(.doc,.xls,.pdf)保存到O域的一台文件共享服务器Ob.在原有的网络环 ...

  4. HTML5 jQuery+FormData 异步上传文件,带进度条

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href ...

  5. ajax异步上传文件FormDate方式,html支持才可使用

    今天需要做一个头像的预览功能,所以我想到了异步上传文件. 总结几点: 异步上传难点: 文件二进制流如何获取 是否需要设置表单的头,就是content-Type那里.异步,所以无所谓了吧. 其他就差不多 ...

  6. ajax异步上传文件和表单同步上传文件 的区别

    1. 用表单上传文件(以照片为例)-同步上传 html部分代码:这里请求地址index.php <!DOCTYPE html> <html lang="en"&g ...

  7. 基于Flask开发网站 -- 前端Ajax异步上传文件到后台

    大家好,我是辰哥~ 辰哥最近利用空闲时间在写一个在线可视化平台,过程中也觉得一些技术还是比较有意思的,所以就以模块化的形式分享出来.如:从网页界面(前端)上传文件到服务器(后端). 放一下该模块的界面 ...

  8. 异步上传文件,ajax上传文件,jQuery插件之ajaxFileUpload

    http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 一.ajaxFileUpload是一个异步上传文件的jQuery插件. ...

  9. spingMVC异步上传文件

    框架是个强大的东西,一般你能想到的,框架都会帮你做了,然后只需要会用就行了,spingmvc中有处理异步请求的机制,而且跟一般处理请求的方法差别不大,只是多了一个注解:spingmvc也可以将stri ...

随机推荐

  1. QQ登录界面

    @property (nonatomic,assign) IBOutlet UITextField *qq; @property (nonatomic,assign) IBOutlet UITextF ...

  2. log4net发布时assembly引用错误的问题

    网上的通行配置: 无论BS还是CS程序都可直接在项目的AssemblyInfo.cs文件里添加以下的语句: [assembly: log4net.Config .XmlConfigurator()] ...

  3. 重启库,提示找不到mysqld

    --ledir=/usr/local/mysql/bin    加上server的 directory https://dev.mysql.com/doc/refman/5.5/en/mysqld-s ...

  4. background和background-position相关笔记

    background 可在一个声明中设置background-color,background-image,background-repeat,background-attachment,backgr ...

  5. C++随机崩溃捕捉处理

    1. 会引起异常的几个原因(主要记录目前遇到过的几个问题) 程序读取了无效的内存地址 堆栈的溢出,比如无限循环导致那段内存溢出,比如把size为20的缓存拷贝到size为10的缓存块等 无法申请到有效 ...

  6. MSG 结构

    MSG 消息结构 在 Windows 程序中,消息是由 MSG 结构体来表示的. 结构原型: typedef struct tagMSG { HWND   hwnd; UINT   message; ...

  7. POJ 1067 取石子游戏 威佐夫博弈

    威佐夫博弈(Wythoff Game):有两堆各若干个物品,两个人轮流从某一堆或同时从两堆中取同样多的物品,规定每次至少取一个,多者不限,最后取光者得胜. 我们用(ak,bk)(ak ≤ bk ,k= ...

  8. Webkit之HTML解析

    加载部分HTML文本(即主资源)后便可以开始解析HTML元素(对输入字节流进行逐字扫描,识别HTML元素),最后生成DOM树,本文只讲HTML解析. HTML解析部分时序图: 其中最为重要的过程是(1 ...

  9. Python文件打包成EXE文件

    工具:pyinstaller 安装:pip install pyinstaller 使用: 1 将依赖文件集中到一个文件夹:           pyinstaller -D -w xxx.py    ...

  10. android5.0----SVG

    SVG ----scalable vector Graphics 可缩放矢量图形 android L 即android 5.0的新特性. 1,SVG是干什么的? 可缩放矢量图形是基于可扩展标记语言(标 ...