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

发布时间：2020-12-16 03:21:48 所属栏目：百科来源：网络整理

导读：最近都没时间整理资料了，一入职就要弄懂业务，整天被业务弄得血崩。总结下今天弄了一个早上的跨域异步上传文件。主要用到技术有HTML5的FormData，AJAX，Spring MVC。首先看下上传页面： ! DOCTYPE html html head meta charset ="UTF-8" script type ="te

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

总结下今天弄了一个早上的跨域异步上传文件。主要用到技术有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" ></scripttitle</bodyinput ="file" id="file_upload"/>
        ="button" value="上传图片"="upload"/>            
    ="js/upload.js" >

上传页面很简单，就两个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: 这个也一定要写，不然会报错
            data:formData,dataType:'text',0)">返回类型，有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/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!