首页 > 代码库 > FormData 对象的使用

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

FormData 对象的使用