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

总结下今天弄了一个早上的跨域异步上传文件。主要用到技术有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. IOS tableViewCell单元格重用中的label重叠的问题

    参考:http://zhidao.baidu.com/link?url=_oMUTo5SxUY6SBaxYLsIpN3i2sZ6SKG35MVlPJd2cNmUf9TGQFkKXX9EXwSwti0n ...

  2. wpf之Popup弹出自定义输入"键盘"

    在很多工厂的信息化MES系统中,车间的采集数据的机器是触摸屏电脑(工厂环境所限,用外接鼠标键盘反而不方便). 由于没有外接键盘,所以用户无法像坐在办公室一样,用鼠标键盘进行录入信息. 这时我们可以用w ...

  3. 【转】configure/make/make install的使用说明

    这些都是典型的使用GNU的AUTOCONF和AUTOMAKE产生的程序的安装步骤. ./configure是用来检测你的安装平台的目标特征的.比如它会检测你是不是有CC或GCC,并不是需要CC或GCC ...

  4. thrift概述

    Apache Thrift 是FaceBook实现的一种跨平台的远程服务调用(RPC)的框架.它采用接口描述语言(IDL)定义并创建服务,传输数据采用二进制格式,相对于XML和Json等常用数据传输方 ...

  5. 理解交互设计之"行为设计与对象设计"

    本文是辛向阳教授在<装饰>杂志(大家可以关注这个权威杂志的公众号,分享给大家)2015年第1期公开发表的学术论文,文章探讨的是交互设计研究 思路的转变.这一转变不仅适用于交互设计,也适用于 ...

  6. java中io对文件操作的简单介绍

    11.3 I/O类使用 由于在IO操作中,需要使用的数据源有很多,作为一个IO技术的初学者,从读写文件开始学习IO技术是一个比较好的选择.因为文件是一种常见的数据源,而且读写文件也是程序员进行IO编程 ...

  7. libmysql.dll 找不到

    在用C#开发的时候,需要连接MySQL  ,系统提示  libmysql.dll 找不到模块. 我们可以找到 MySQL安装文件夹下的 C:\Program Files\MySQL\MySQL Ser ...

  8. JavaScript（1）——变量、函数声明及作用域

    这是我的第一篇博客文章,本人不才,文笔也不好,所以可能写的有点凌乱.有什么不对的地方还望见谅.不过每天进步一小步,总有一天会迈出那一大步.以下内容是我对变量.函数声明及函数表达式.作用域的理解. [变 ...

  9. [原创] web_custom_request 与 Viewstate

    在用loadrunner对.net编写的website进行性能测试时,经常会遇上一些hidden fields,例如,CSRFTOKEN.VIEWSTATE.EVENTVALIDATION等,而对于这 ...

  10. 激活OFFICE2010时,提示choice.exe不是有效的win32程序

    我在安装office2010破解版时,提示choice.exe不是有效的win32应用程序 删除choice.exe再激活,按提示找到目录删掉这个文件,需要设置显示隐藏文件夹