使用MultipartFile实现文件上传

　　项目中会经常实现文件上传功能，比如在前台页面中设置上传文件按钮，后台保存文件至服务器，操作完成后前台展示上传结果，如上传成功或者上传失败信息。使用MultipartFile可以很容易的实现文件上传功能。

使用spring的MultipartFile上传文件时，后台java代码中引入该类

import org.springframework.web.multipart.MultipartFile;

 

1 html页面中设置上传图片按钮

　　在前台页面中需要设置上传按钮，如下代码所示，我们将文件按钮放在一个form中，当提交的时候，form会按action中的值提交到服务器端的方法，这里的enctype类型设置为 multipart/form-data 格式。callback 控件来标识回调的方法

<form action="" id="backImage" name="backImage" method="POST" target="hiddenFrame" enctype="multipart/form-data">

<input type="file" name="backImageFile" id="backImageFile">

<input type="text" id="callback" name="callback" style="display:none;">

    < iframe name="hiddenFrame" style="display:none"></iframe>

</form>

 

2 js中编写回调方法、表单提交方法

　　在js方法中，编写回调函数的内容，来处理服务器上传图片后的操作。然后提交form表单，这样from表单内容就提交到服务器中了。

var _fnName = "__uploadCallback" + (new Date()).getTime();

Y.one("#callback").set("value", _fnName);                                         

window[_fnName] = Y.bind(function(result) {

    if(!result.success) {

        //显示上传失败的原因等错误信息

    } else {

        //显示上传成功的信息

    }           

}

                                                                

Y.one("#backImage").set("action",Y2.meta.rootPath + "/home/print/uploadbackimage.htm");

Y.one("#backImage").submit();

 

3  服务器保存文件，返回回调结果

　　服务器接收到表单提交的内容后，首先调用File等文件操作类保存文件到某个目录下，操作完成后，通过响应流来返回回调的内容。@RequestParam(value = "backImageFile", required = false) MultipartFile 中，这里的value需要指明上传文件 type=”file”的name值。

　　具体代码如下

@RequestMapping(value="/home/print/uploadbackimage",method=RequestMethod.POST)

public void updateImageHandler(HttpServletRequest request,

@RequestParam(value = "backImageFile", required = false) MultipartFile

backImageFile , HttpServletResponse response){

    String callback = ServletRequestUtils.getStringParameter(request, "callback","");
    
    String imgName = "";

    boolean  uploadFlag = 保存图片操作后的结果;

    //向输出流写入内容，并调用回调方法

    StringBuffer javaScript = new StringBuffer();

    javaScript.append("<script type='text/javascript'>\n");

    javaScript.append("  var reslut = {};\n");

    if(uploadFlag){

        javaScript.append("  reslut.success = true;\n");

    }else{

        javaScript.append("  reslut.success = false;\n");

        javaScript.append("  reslut.message = '上传图片失败!';\n");

    }

    //调用回调方法
    javaScript.append("  window.parent." + callback + "(reslut);\n");

    javaScript.append("</script>\n");

    response.setContentType("text/html;charset=utf-8");

    PrintWriter out = null;

    try {

        out = response.getWriter();

        out.println(javaScript.toString());

    } catch (IOException e) {

        e.printStackTrace();

    } finally {

        if(out != null){

            out.close();

        }

    }

}

 

上述代码中使用了

javaScript.append("  window.parent." + callback + "(reslut);\n");

因为前台页面form的target指向了一个隐藏的 iframe，这样当form提交后响应的流入就会输出到iframe所在的页面中。Window.parent.callback() 就调用了iframe的父窗口中的写的回调方法，这个回调名可以任意。在这个回调方法中就能判断是上传成功了还是上传失败了。

转载于:https://www.cnblogs.com/sigal/p/3615534.html