FormData 对象的使用

Posted 2020-09-28 码上猿梦

       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);
    }