SpringMVC Ajax上传文件实例

发布时间:2017-6-29 10:16:31编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"SpringMVC Ajax上传文件实例",主要涉及到SpringMVC Ajax上传文件实例方面的内容,对于SpringMVC Ajax上传文件实例感兴趣的同学可以参考一下。

做了一个文件上传模块,因为传统的form提交会有页面刷新,不符合我的使用要求,所以我采用Ajax提交方式,这里说明下,我的应用程序前端为Ajax提交,后端SpringMVC接收处理。

传统form提交文件方式:

<form id="uploadPic" action="/user/saveHeaderPic" method="post" enctype="multipart/form-data">
    <input type="file" name="file"/>
    <input type="submit" value="提交"/>
</form>

采用Ajax提交文件,我先后出现了如下两个问题:

  1. Ajax post 400 (Bad Request)

  2. HTTP Status 400 - Required CommonsMultipartFile parameter ‘pic’ is not present

这里先解释下错误原因:

问题1:

Ajax参数错误导致,上传文件的form我使用了jquery.form.js的form序列化,这样传输表单到后台很方便,但是二进制文件是无法用form.serialize()序列化的。

所以最终我采用了FormData的传输方式,XMLHttpRequest Level 2添加了一个新的接口FormData。利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个“表单”。比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件。

但使用formData对浏览器有一定要求(Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+),如果程序需要兼容低版本浏览器,可去查看其他JS上传控件或flash上传控件。

formData使用参看:https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormData

问题2:

这个问题是因为不细心导致的 - -,后端接收的参数名和前端file控件name名称不一致导致。

好啦,下面给出我的前后端代码示例:

HTML:

<form id="uploadPic" action="#" enctype="multipart/form-data">
    <input type="file" name="file">
    <a href="javascript:savePic();" class="btn green"> 提交 </a>
</form>

JS脚本:

<script type="text/javascript">
    function savePic(){
        var formData = new FormData($( "#uploadPic" )[0]);  
        var ajaxUrl = "${path}/rest/user/saveHeaderPic";
        //alert(ajaxUrl);
        //$('#uploadPic').serialize() 无法序列化二进制文件,这里采用formData上传
        //需要浏览器支持:Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
        $.ajax({
            type: "POST",
            //dataType: "text",
            url: ajaxUrl,
            data: formData,
            async: false,  
            cache: false,  
            contentType: false,  
            processData: false,
            success: function (data) {
            alert(data);
            },
            error: function(data) {
                alert("error:"+data.responseText);

             }
        });
        return false;
    }

JAVA后端:

/**
 * 头像图片上传
 * @throws IOException 
 */
@RequestMapping(value = "/saveHeaderPic", method = RequestMethod.POST)
public void saveHeaderPic(@RequestParam("file") CommonsMultipartFile file, HttpServletRequest request, HttpServletResponse response) throws IOException {

        String resMsg = "";
    try {

        long  startTime=System.currentTimeMillis();

        System.out.println("fileName:"+file.getOriginalFilename());
        String path="/Users/loukai/easylife/files/"+new Date().getTime()+file.getOriginalFilename();
        System.out.println("path:" + path);

        File newFile=new File(path);
        //通过CommonsMultipartFile的方法直接写文件
        file.transferTo(newFile);
        long  endTime=System.currentTimeMillis();
        System.out.println("运行时间:"+String.valueOf(endTime-startTime)+"ms");
        resMsg = "1";
    } catch (IllegalStateException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
        resMsg = "0";
    }
          response.getWriter().write(resMsg);

      }

运行测试,文件上传成功!

这里写图片描述


上一篇:SVN中报错 “Previous operation has not finished; run 'cleanup' if it was interrupted” 的解决办法
下一篇:Linux常用命令

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款