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

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

1. bootstrap实现前端上传模板

上传文件

<div id="batchModal" class="modal w600 fade" tabindex="-1" role="dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title">批量操作</h4></div>
    <div class="modal-body">
      <div class="w600">
        <h4>一.请按照文件模版格式准确导入文件：</h4>
        <a href="./batch/downTemplate" target="_Blank">下载文件模板</a>
        <h5>注意事项：</h5>
        <ul>
          <li>按EXCEL模版填写数据，不可私自删除列和修改列名；</li>
          <li>必填项不可删除且必须填写；</li>
          <li>单次最大支持100笔。</li></ul>
        <h4>二.请选择要导入的数据文件：</h4>
        <form id="batchForm" action="">
          <input type="file" name="XXX" id="batchFile" class="file-loading" style="display:none" onchange="$('#batchFilename').val($(this).val());" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
          <div class="input-group col-md-7">
            <input id="batchFilename" class="form-control filename" type="text" />
            <a class="btn btn-default btn-sm input-group-addon" onclick="$('input[id=batchFile]').click();">
              <i class="fa fa-file-image-o"></i>选择文件</a>
          </div>
        </form>
      </div>
    </div>
    <div class="modal-footer">
      <button id="batchButton" type="button" class="btn green" onclick="batchSubmit()">上传</button></div>
  </div>
</div>.modal.w600 { width: 600px; margin-left: -300px; }

1. 文件上传框（原生）

原生上传框

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

2. 只显示特定的文件

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

在<input type="file" accept="xxx">中设置accept属性。

3. input-group输入框组

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

4. click事件和change事件

上面说到，我们将<input type="file">隐藏后，如何操作它？

使用onclick="$('input[id=batchWithdrawFile]').click();"事件，点击后其实掉起的是<input type="file">
选择文件后，如何将选择后的文件显示在<input type="text"/>上呢？使用 onchange="$('#batchFilename').val($(this).val());"写入。

显示效果

2. Ajax交互

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

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

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

2.1 获取上传文件名

<input type="file"  id="batchFile">

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

2.2. 获取上传的文件流

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

1. HTML代码：

<form id="uploadForm" enctype="multipart/form-data">
    <input id="file" type="file" name="file"/>
    <button id="upload" type="button">upload</button>
</form>

2. js代码：

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

3. 需要注意的几点：

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

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

1. HTML代码：

<div id="uploadForm">
    <input id="file" type="file"/>
    <button id="upload" type="button">upload</button>
</div>

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]中可以看到一个<input type="file">标签能够上传多个文件，只需要在<input type="file">里添加multiple或multiple="multiple"属性。

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

    <!-- 配置nultipartresolver,注意：id名必须这样写，不然会报错 -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- 默认编码 -->
        <property name="defaultEncoding" value="utf-8"/>
        <!-- 文件大小最大值 -->
        <property name="maxUploadSize" value="10485760000"/>
        <!-- 内存中的最大值 -->
        <property name="maxInMemorySize" value="40960"/>
    </bean>

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

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

HTTP请求中 request payload 和 formData 区别？

2.3.1 FormData格式

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

<script>
var obj = {
            "merchId": merchId,
            "orderId": orderId,
        };
    $('.btn').click(function() {
      $.ajax({
        url: 'www.example.com',
        type: 'POST',
        dataType: 'json',
        data: obj,
        success: function(d) {
            
        }
      })
    });
  </script>

post提交格式

2.3.2 payload格式

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

文件上传格式

对于文件上传需要进行特殊处理，即在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();
            }
        }

批量处理1——文件的上传（bootstrap+Ajax+SSM）