批量處理1——文件的上傳（bootstrap+Ajax+SSM）

批量處理1——文件的上傳（bootstrap+Ajax+SSM）
批量處理2——Java花式處理EXCEL
批量處理3——Excel文件導(dǎo)出
批量處理4——java處理壓縮文件

Java知多少——相對(duì)路徑和絕對(duì)路徑
HTTP知多少——Content-disposition（文件下載）

1. bootstrap實(shí)現(xiàn)前端上傳模板

上傳文件
<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>一.請(qǐng)按照文件模版格式準(zhǔn)確導(dǎo)入文件：</h4>
        <a href="./batch/downTemplate" target="_Blank">下載文件模板</a>
        <h5>注意事項(xiàng)：</h5>
        <ul>
          <li>按EXCEL模版填寫(xiě)數(shù)據(jù)，不可私自刪除列和修改列名；</li>
          <li>必填項(xiàng)不可刪除且必須填寫(xiě)；</li>
          <li>單次最大支持100筆。</li></ul>
        <h4>二.請(qǐng)選擇要導(dǎo)入的數(shù)據(jù)文件：</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. 只顯示特定的文件

如何文件上傳時(shí)只顯示某種格式的文件——accept屬性列表

在<input type="file" accept="xxx">中設(shè)置accept屬性。

3. input-group輸入框組

將Input標(biāo)簽和icon圖標(biāo)整合在一起。

4. click事件和change事件

上面說(shuō)到，我們將<input type="file">隱藏后，如何操作它？

  • 使用onclick="$('input[id=batchWithdrawFile]').click();"事件，點(diǎn)擊后其實(shí)掉起的是<input type="file">
  • 選擇文件后，如何將選擇后的文件顯示在<input type="text"/>上呢？使用 onchange="$('#batchFilename').val($(this).val());"寫(xiě)入。
顯示效果

2. Ajax交互

使用FormData實(shí)現(xiàn)文件的上傳。使用FormData在構(gòu)造對(duì)象的時(shí)候，把表單的對(duì)象作為一個(gè)參數(shù)放進(jìn)去，就可以了。然后FormData，就會(huì)得到這個(gè)表單對(duì)象里面的所有的參數(shù)，甚至我們?cè)诒韱沃校疾恍枰暶鱡nctype ="multipart/form-data" ，就可以直接提交。

通過(guò)jQuery Ajax使用FormData對(duì)象上傳文件

使用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"時(shí)

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. 需要注意的幾點(diǎn)：

  • processData設(shè)置為false。因?yàn)閐ata值是FormData對(duì)象，不需要對(duì)數(shù)據(jù)做處理。
  • <form>標(biāo)簽添加enctype="multipart/form-data"屬性。
  • contentType設(shè)置為false。因?yàn)槭怯?lt;form>表單構(gòu)造的FormData對(duì)象，且已經(jīng)聲明了屬性enctype="multipart/form-data"，所以這里設(shè)置為false。
  • 上傳后，服務(wù)器端代碼需要使用從查詢參數(shù)名為file獲取文件輸入流對(duì)象，因?yàn)?strong><input>中聲明的是name="file"。

2.2.2 若是沒(méi)有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. 需要注意的幾點(diǎn)：

  • append()的第二個(gè)參數(shù)應(yīng)是文件對(duì)象，即$('#file')[0].files[0]。
  • contentType也要設(shè)置為'false'。
  • 從代碼$('#file')[0].files[0]中可以看到一個(gè)<input type="file">標(biāo)簽?zāi)軌蛏蟼鞫鄠€(gè)文件，只需要在<input type="file">里添加multiple或multiple="multiple"屬性。

注意事項(xiàng)：
使用FormData提交的時(shí)候，注意表單提交的是Request payload。后臺(tái)需要特殊處理的。比如在SpringMVC中，可以采用下面的配置。

    <!-- 配置nultipartresolver,注意：id名必須這樣寫(xiě)，不然會(huì)報(bào)錯(cuò) -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- 默認(rèn)編碼 -->
        <property name="defaultEncoding" value="utf-8"/>
        <!-- 文件大小最大值 -->
        <property name="maxUploadSize" value="10485760000"/>
        <!-- 內(nèi)存中的最大值 -->
        <property name="maxInMemorySize" value="40960"/>
    </bean>

2.3 HTTP請(qǐng)求中 request payload 和 formData 區(qū)別？

FormData和Payload是瀏覽器傳輸給接口的兩種格式，這兩種方式瀏覽器是通過(guò)Content-Type來(lái)進(jìn)行區(qū)分的。如果是application/x-www-form-urlencoded的話，則為formdata方式，如果是application/json或multipart/form-data的話，則為request payload的方式。

HTTP請(qǐng)求中 request payload 和 formData 區(qū)別？

2.3.1 FormData格式

在servlet中，可以通過(guò)request.getParameter(name)的形式來(lái)獲取FormData表單參數(shù)。

<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格式。

文件上傳格式

對(duì)于文件上傳需要進(jìn)行特殊處理，即在Spring-mvc.xml配置文件中增加multipartResolver配置。

源碼

//批量上傳提交
function batchSubmit() {
    var self = $('#batchButton');
    if (self.hasClass("disabled")) return;
    /*獲取上傳的文件名*/
    var fileName = new String($('#batchFile').val());
    /*文件校驗(yàn)*/
    if (fileName == null || fileName == '') {
        layer.alert("請(qǐng)選擇文件!", {icon: 2});
        return;
    }
    if (!fileName.endWith(".xlsx") && !fileName.endWith(".xls")) {
        layer.alert("請(qǐng)選擇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: ['開(kāi)始信息校驗(yàn)', '刪除原文件']
                }, function () {
                    /*上傳到服務(wù)器上開(kāi)始文件校驗(yàn)*/
                    $.ajax({
                        type: "POST",
                        url: "./batchFile/validateFile",
                        data: null,
                        contentType: 'application/json;charset=utf-8', //設(shè)置請(qǐng)求頭信息
                        dataType: "json",
                        beforeSend: function () {
                            layer.msg("數(shù)據(jù)校驗(yàn)中。。。", {icon: 1, time: -1, shade: 0.4});
                        },
                        success: (function (json) {
                            /*文件校驗(yàn)成功，返回成功筆數(shù)和失敗筆數(shù)*/
                            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");
        }
    });
}

后臺(tái)代碼：

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(" 真實(shí)路徑 ： " + destFile.getAbsolutePath());
                
            } catch (IllegalStateException e) {
                // TODO Auto-generated catch block
                throw new MyUserException();
            } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容