批量处理1——文件的上传(bootstrap+Ajax+SSM)

批量处理1——文件的上传(bootstrap+Ajax+SSM)
批量处理2——Java花式处理EXCEL
批量处理3——Excel文件导出
批量处理4——java处理压缩文件

Java知多少——相对路径和绝对路径
HTTP知多少——Content-disposition(文件下载)

1. bootstrap实现前端上传模板

批量处理1——文件的上传(bootstrap+Ajax+SSM)_第1张图片
上传文件
.modal.w600 { width: 600px; margin-left: -300px; }

1. 文件上传框(原生)

批量处理1——文件的上传(bootstrap+Ajax+SSM)_第2张图片
原生上传框

将原生上传框隐藏显示,style="display:none"

2. 只显示特定的文件

如何文件上传时只显示某种格式的文件——accept属性列表

中设置accept属性。

3. input-group输入框组

将Input标签和icon图标整合在一起。

4. click事件和change事件

上面说到,我们将隐藏后,如何操作它?

  • 使用onclick="$('input[id=batchWithdrawFile]').click();"事件,点击后其实掉起的是
  • 选择文件后,如何将选择后的文件显示在上呢?使用 onchange="$('#batchFilename').val($(this).val());"写入。
批量处理1——文件的上传(bootstrap+Ajax+SSM)_第3张图片
显示效果

2. Ajax交互

使用FormData实现文件的上传。使用FormData在构造对象的时候,把表单的对象作为一个参数放进去,就可以了。然后FormData,就会得到这个表单对象里面的所有的参数,甚至我们在表单中,都不需要声明enctype ="multipart/form-data" ,就可以直接提交。

通过jQuery Ajax使用FormData对象上传文件

使用ajax提交form表单,包括ajax文件上传

2.1 获取上传文件名



var fileName = new String($('#batchFile').val());

2.2. 获取上传的文件流

2.2.1 若是HTML代码中采用form表单,并指定enctype="multipart/form-data"时

1. HTML代码:

2. js代码:

$.ajax({
    url: '/upload',
    type: 'POST',
    data: new FormData($('#uploadForm')[0]),
    processData: false,
    contentType: false
})

3. 需要注意的几点:

  • processData设置为false。因为data值是FormData对象,不需要对数据做处理。
  • 标签添加enctype="multipart/form-data"属性。
  • contentType设置为false。因为是由表单构造的FormData对象,且已经声明了属性enctype="multipart/form-data",所以这里设置为false。
  • 上传后,服务器端代码需要使用从查询参数名为file获取文件输入流对象,因为中声明的是name="file"

2.2.2 若是没有form表单以及enctype="multipart/form-data"属性

1. HTML代码:

2. js代码:

var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
    url: '/upload',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false
})

3. 需要注意的几点:

  • append()的第二个参数应是文件对象,即$('#file')[0].files[0]
  • contentType也要设置为'false'
  • 从代码$('#file')[0].files[0]中可以看到一个标签能够上传多个文件,只需要在里添加multiple或multiple="multiple"属性。

注意事项:
使用FormData提交的时候,注意表单提交的是Request payload。后台需要特殊处理的。比如在SpringMVC中,可以采用下面的配置。

    
    
        
        
        
        
        
        
    

2.3 HTTP请求中 request payload 和 formData 区别?

FormData和Payload是浏览器传输给接口的两种格式,这两种方式浏览器是通过Content-Type来进行区分的。如果是application/x-www-form-urlencoded的话,则为formdata方式,如果是application/jsonmultipart/form-data的话,则为request payload的方式。

HTTP请求中 request payload 和 formData 区别?

2.3.1 FormData格式

在servlet中,可以通过request.getParameter(name)的形式来获取FormData表单参数。


批量处理1——文件的上传(bootstrap+Ajax+SSM)_第4张图片
post提交格式

2.3.2 payload格式

Content-Type: application/json 或者 multipart/form-data格式。

批量处理1——文件的上传(bootstrap+Ajax+SSM)_第5张图片
文件上传格式

对于文件上传需要进行特殊处理,即在Spring-mvc.xml配置文件中增加multipartResolver配置。

源码

//批量上传提交
function batchSubmit() {
    var self = $('#batchButton');
    if (self.hasClass("disabled")) return;
    /*获取上传的文件名*/
    var fileName = new String($('#batchFile').val());
    /*文件校验*/
    if (fileName == null || fileName == '') {
        layer.alert("请选择文件!", {icon: 2});
        return;
    }
    if (!fileName.endWith(".xlsx") && !fileName.endWith(".xls")) {
        layer.alert("请选择EXCEL文件!", {icon: 2});
        return;
    }
    /*使用FormData获取上传的文件*/
    var formData = new FormData();
    formData.append("XXX", document.getElementById("batchFile").files[0]);

    $.ajax({
        url: "./batchFile/upload",
        type: "POST",
        data: formData,
        contentType: false,
        processData: false,
        success: function (data) {
            if (data.code == '200') {
                layer.confirm('上传成功!', {
                    btn: ['开始信息校验', '删除原文件']
                }, function () {
                    /*上传到服务器上开始文件校验*/
                    $.ajax({
                        type: "POST",
                        url: "./batchFile/validateFile",
                        data: null,
                        contentType: 'application/json;charset=utf-8', //设置请求头信息
                        dataType: "json",
                        beforeSend: function () {
                            layer.msg("数据校验中。。。", {icon: 1, time: -1, shade: 0.4});
                        },
                        success: (function (json) {
                            /*文件校验成功,返回成功笔数和失败笔数*/
                            if (json.code == 200) {
                                layer.closeAll();
                                var data = json.data;
                                $("#successCount").html(data.success);
                                $("#errorCount").html(data.error);
                                /*提供失败文件下载的功能*/
                                $("#downloadErrorFile").attr("href", "./batchFile/errorDownload?type=ERRORFILE");
                                $('#batchResultModal').modal('show');
                            } else {
                                layer.msg(json.message, {icon: 2, time: 2000, shade: 0.4});
                            }
                        }),
                        error: function (json) {
                            layer.closeAll();
                        }
                    });
                }, function () {
                    layer.alert('删除成功!', {icon: 1});
                });
            } else {
                layer.alert(data.message, {icon: 2});
            }
            layer.closeAll('loading');
            self.removeClass("disabled");
        },
        error: function () {
            layer.closeAll('loading');
            layer.alert("上传失败!", {icon: 2});
            self.removeClass("disabled");
        },
        beforeSend: function () {
            layer.load(2, {shade: 0.4});
            self.addClass("disabled");
        }
    });
}

后台代码:

public String upload(@RequestParam("file") MultipartFile file,
            @RequestParam("desc") String desc, HttpServletRequest request) {
        if (!file.isEmpty()) {
            System.out.println("desc : " + desc);
            try {
            
                System.out.println("path : " + path);
                File destFile = new File("file/" + file.getOriginalFilename());
                System.out.println(" 真实路径 : " + destFile.getAbsolutePath());
                
            } catch (IllegalStateException e) {
                // TODO Auto-generated catch block
                throw new MyUserException();
            } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }

你可能感兴趣的