使用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的父窗口中的寫的回調方法，這個回調名能夠任意。在這個回調方法中就能判斷是上傳成功了仍是上傳失敗了。