FormData 對象的使用

       XMLHttpRequest Level 2 添加了一個新的接口—— FormData。利用 FormData 對象，我們可以通過 JavaScript 用一些鍵值對來模擬一系列表單控件，我們還可以使用 XMLHttpRequest 的 send() 方法來異步的提交表單，通過FormData對象可以組裝一組用 XmlHttpRequest 發送請求的鍵/值對。它可以更靈活方便的發送表單數據，因為可以獨立於表單使用。如果你把表單的編碼類型設置為multipart/form-data ，則通過FormData傳輸的數據格式和表單通過 submit() 方法傳輸的數據格式相同，與普通的 Ajax 相比，使用 FormData 的最大優點就是我們可以異步上傳二進制文件。

代碼上來先：

$(function() {
        $('#upload').click(ajaxUpload);
    });

    function ajaxUpload() {
        var file1 = $('#file1')[0].files[0];
        var file2 = $('#file2')[0].files[0];
        // 創建內存中的表單對象
        var form = new FormData();
        form.append('file1', file1);
        form.append('file2', file2);

        $.ajax({
            url : 'account/upload.do',
            data : form,
            type : 'post',
            dataType : 'json',
            contentType : false,
            processData : false,
            success : function(obj) {
                //這里的obj.state來自於JsonResult的成員變量
                //0為正常，1為異常
                if (obj.state == 0) {
                    $('#result').html("成功");
                } else {
                    $('#result').html("出現了小錯誤");
                }
            }
        });
    }

其中 JsonResult 是自定義的一個返回 Json格式的 Java類，在 action中對於異步請求返回的是 Json格式的字符串。

html 部分代碼：

Ajax UpLoad:
    <br>
    <input id="file1" type="file">
    <br>
    <input id="file2" type="file">
    <br>
    <input type="button" value="submit" id="upload" />
    <!-- 展示返回信息 -->
    <div id="result"></div>

后台 Controller處理代碼：【類名上寫了映射 @RequestMapping("/account")】

/**
     * 文件上傳
     * @param file1
     * @param file2
     * @return
     * @throws IllegalStateException
     * @throws IOException
     */
    @RequestMapping("/upload.do")
    @ResponseBody
    public Object upload(MultipartFile file1, MultipartFile file2) throws IllegalStateException, IOException {
        // Spring MVC 中可以利用MultiPartFile接收上傳的文件
        // 文件中的一切數據都可以從MultiPartFile對象中找到

        // 獲取上傳文件的原始文件名
        String f1 = file1.getOriginalFilename();
        String f2 = file2.getOriginalFilename();
        System.out.println(f1);
        System.out.println(f2);
        // 保存上傳文件的三種方法：
        // 1. transferTo(目標文件) 將上傳文件直接保存到目標文件，可以處理大文件
        // 2. file1.getBytes() 獲取文件的全部字節，讀取到內存中，適合處理小文件
        // 3. file1.getInputStream() 獲取上傳文件的流，適合處理大文件

        // 第一種保存文件
        File dir = new File("C:/demo");
        dir.mkdir();

        File fl1 = new File(dir, f1);
        File fl2 = new File(dir, f2);

        // file1.transferTo(fl1);
        // file2.transferTo(fl2);

        // 第三種保存文件
        InputStream in = file1.getInputStream();
        FileOutputStream out = new FileOutputStream(fl1);
        int b;
        while ((b = in.read()) != -1) {
            out.write(b);
        }
        in.close();
        out.close();

        InputStream in2 = file2.getInputStream();
        FileOutputStream out2 = new FileOutputStream(fl2);
        byte[] buff = new byte[8 * 1024]; // 8k緩沖區
        int b2;
        while ((b2 = in2.read(buff)) != -1) {
            out2.write(buff, 0, b2);
        }
        out2.close();
        in2.close();

        return new JsonResult(true);
    }