FormData+AJAX+SpringMVC跨域异步上传文件

最新推荐文章于 2024-03-13 13:42:26 发布

goodgo24

最新推荐文章于 2024-03-13 13:42:26 发布

阅读量1.8k

点赞数

之前用ajaxsubmit想做跨域post提交文件并返回文件地址

，无果，转而采用第二种方式。

利用FormData，ajax,spingMVC

jsp页面

<!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">
    $(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();
    });
});
    </script>
</html>

 下面是后台处理页面

    @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 "fileAddress";

    }

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

就这样就能实现跨域和ajax上传图片了