AjaxFormData 对象的使用

       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 Ajax,* 1024]; // 8k缓冲区
int b2;
while ((b2 = in2.read(buff)) != -1) {
out2.write(buff, 0, b2);
}
out2.close();
in2.close();

return new JsonResult(true);
}

相关文章