2. 程式人生 > >jquery ajax 多檔案Excel解析上傳

jquery ajax 多檔案Excel解析上傳

阿新 • • 發佈：2018-11-11

------jsp 前臺--------------------

<form  id="importOrderFrom" name="importOrderFrom"  method="post" enctype="multipart/form-data">   

               <div class="dthwxxheada" style="position:relative;">
                     <span>客戶名稱</span>
    <input type="hidden" name="merchantName" id="merchantName">
    <input type="text" name="venderId">
                       <input type="hidden" name="vender">
                       <ul class="searchrelt"  name="searchrelt" style="width:150px;">
                          
                       </ul>
               </div>
               <div class="dthwxxheada">
                     <span>訂單來源</span>
                     <select  id="orderSource" name="orderSource">
                      <option value="">請選擇</option>
                           <option value="10001">1號店商家明細</option>
                           <option value="10003">京東商家</option>
                           <option value="10005">天貓商家</option>
                     </select>
                     <a href="http://www.fron.net/help/661.jhtml" target="_blank">採購單獲取說明</a>
               </div>
               
               <div class="dthwxxheada">
                     <span>解析模式</span>
                     <select id="fileType" onchange=" changeFileType()">
                     <option value="1">普通檔案</option>
                     <option value="2">多個檔案</option>
                     </select>
                     <span style="color: red;">普通檔案：一個excel裡有多個訂單；
                    多個檔案：每個excel裡只有一個訂單
                     </span>
               </div>
               <div class="dthwxxheada" id="singleFile">
                     <span>訂單檔案</span>
                     <input  type="file" id="orderImportFile"  name="orderImportFile[]"   />
               </div>
              <!--  <div id="upload" style="display: none;">
</div>
<a class="uploadbtn" style="text-align: right;display: none;margin-left: -1px;">解析預覽</a>
                -->
               <div class="dthwxxheada" >
                 <button class="btn btn-info" id="btm" type="button" onclick= "importOrder()" >解析預覽</button>
               </div>
               <label id="errorInfo" style="margin-left:20px;color: red;"></label>

                </form>



<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap-select.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-form.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/dateutil.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/order/order_import.js?version=201610211604"></script>


   --------------------------js 檔案事件--------------------------


/**
 * 當選擇天貓時候,顯示多檔案模式還是單檔案模式。
 */
function changeFileType(){
var fileType=$("#fileType").val();
if(fileType=="2"){
$("#orderImportFile").attr("multiple","multiple");
}else{
$("#orderImportFile").removeAttr("multiple");
}

}





/**
 * 解析預覽按鈕事件
 */
function importOrder(){

$("#btm").attr("disabled","true"); //設定變灰按鈕  
setTimeout("$('#btm').removeAttr('disabled')",4000); 

var fileType = $("#fileType").val();
var urlStr="";
if(fileType=="2"){
urlStr = ctx+'/orderImport/parseDuoFileExcel';
}else{
urlStr = ctx+'/orderImport/parseExcel';
}
var file=$("#orderImportFile").val();
   if(file==""){
    alert("請選擇訂單檔案！"); 
       return; 
   } 
   var extStart=file.lastIndexOf("."); 
   var ext=file.substring(extStart,file.length).toUpperCase(); 
   if(ext!=".XLS" && ext!=".XLSX"){ 
       alert("檔案格式僅限於.xls或.xlsx"); 
       return; 
   } 
  
   var displayV  = $("ul.searchrelt").css("display");
   var merchantName = "";
   if(displayV=="none"){
    merchantName = $("ul.searchrelt").children().children().val();
    $("#merchantName").val(merchantName);
   }
var orderSource=$("#orderSource").val();
if(merchantName==null || merchantName==""){
alert("請選擇客戶名稱!");
return;
}else if(orderSource==null || orderSource==""){
alert("請選擇訂單來源!");
return;
}else if(file!=""){
$('#table').bootstrapTable('destroy');
$("#errorInfo").html("");
       var options = {
           url:urlStr,
        data:{},
        type:'post',
        beforeSubmit:function() { 
        MaskUtil.mask("正在解析...");  
        },
           success:function(data){  
            MaskUtil.unmask();  
            if(data.result=="1"){//--1--則解析成功，正常顯示預覽頁面
            $("#errorInfo").html(data.msg);
            orderVersion = data.orderVersion;
            $('#table').bootstrapTable({
            url:ctx+"/orderImport/loadParseExcel",
            queryParams:"queryParamsForOrderImport"
            });
            }else if(data.result=="2"){//--2--則顯示維護對映頁面
            //1生成目的地下拉框
            var areaSelect=new Array();
            $.ajax({  
               url:ctx+'/orderImport/loadFronarea',
              data:{platId:orderSource},
               dataType:'json',
               async: false,
               success:function(dataArea) {
               areaSelect = dataArea.area;
               },
                   error:function(result) { 
                       } 
            });
           
           
            //2生成頁面資料
            var table11 = $(".table111 tbody").empty();
            var orderTempMapList = data.orderTempMapList;
            for(var i=0;i<orderTempMapList.length;i++){
            var elactPlatId=orderTempMapList[i].elactPlatId;
            var elactPlatName=orderTempMapList[i].elactPlatName;
            var descBranchId="";
            var descBranchIdHidden="";
            var branchName="";
            var descId="";
            var descIdHidden="";
            if(elactPlatId=='10001'){//1號店
            descId = orderTempMapList[i].descBranchId.substr(0,2);
            branchName = orderTempMapList[i].descBranchId.substr(0,2);
            descBranchId = orderTempMapList[i].descBranchId;
            descBranchIdHidden = orderTempMapList[i].descBranchId;
            }else if(elactPlatId=='10003'){//京東
            var addressDel=orderTempMapList[i].addressDel;
            descId=orderTempMapList[i].descId;
            for(var j=0;j<areaSelect.length;j++){
                var areaName = areaSelect[j].areaName;
                var indexDesc = addressDel.indexOf(areaName);
                if(indexDesc!=-1){
                branchName=areaName;
                break;
                }
            }
            descBranchId = orderTempMapList[i].descBranchId;
            descBranchIdHidden = orderTempMapList[i].descBranchId;
            descIdHidden = orderTempMapList[i].descId;
            }else if(elactPlatId=='10005'){//天貓
            descId = "";
            branchName = orderTempMapList[i].descBranchId;
            descBranchId = orderTempMapList[i].descBranchId;
            descBranchIdHidden = orderTempMapList[i].descBranchId;
            }
            var table11Str=" <tr> "+
            "  <td><input type='hidden' name='elactPlatIds' value='"+elactPlatId+"'/>"+elactPlatName+"</td> "+
            "  <td><input type='hidden' name='descAreaIds' value='"+descIdHidden+"'/>"+descId+"</td> "+
            "  <td><input type='hidden' name='dcNames' value='"+descBranchIdHidden+"'/> "+descBranchId+"</td> ";
            table11Str+= "  <td>"+elactPlatName+"</td>";
            //3生成目的地下拉框
            var selectedAreaId="";
            var selectArea="<select id='area_"+i+"' name='areaIds' onchange='appendBranch("+elactPlatId+","+i+")'><option value=''>請選擇</option>";
                for(var j=0;j<areaSelect.length;j++){
                var areaName = areaSelect[j].areaName;
                var areaId = areaSelect[j].areaId;
                if(branchName.indexOf(areaName)!=-1){
                selectedAreaId=areaId;
                selectArea+="<option selected='selected' value="+areaId+">"+areaName+"</option>";
                }else{
                selectArea+="<option value="+areaId+">"+areaName+"</option>";
                }
                }
            selectArea+="</select>";
            table11Str+= "  <td>"+selectArea+"</td>";
             
               //4生成目的地第三級分倉下拉框
            var dataAreaDcBranch=new Array();
            $.ajax({  
               url:ctx+'/orderImport/selectBranchsByPlatIdAndAreaId',
               data:{areaId:selectedAreaId,platId:elactPlatId},
               dataType:'json',
               async: false,
               success:function(dataAreaBranch) {
               dataAreaDcBranch = dataAreaBranch.dcBranch;
               },
                   error:function(result) { 
                       } 
            });
            var selectAreaBranch="<select id='areaBranch_"+i+"' name='areaBranchs' ><option value=''>請選擇</option>";
                for(var j=0;j<dataAreaDcBranch.length;j++){
                var branchName = dataAreaDcBranch[j].branchName;
                var branchId = dataAreaDcBranch[j].branchId;           
                selectAreaBranch+="<option value="+branchId+">"+branchName+"</option>";
                }
                selectAreaBranch+="</select>";
             
            table11Str+= "  <td id='td_branch_"+i+"'>"+selectAreaBranch+"</td>"+
              "  </tr>";
            table11.append(table11Str);
            }
            $('.daoru').show();
            }else{
            alert("解析失敗!");
            }
           },
           error:function(result) { 
            MaskUtil.unmask();  
               alert("解析失敗!");
           } 
       };    
       $("#importOrderFrom").ajaxSubmit(options);
}else{
alert("請選擇訂單檔案！");
return;
}

  }



---------java springMvc後臺接受--------


/**
     * 解析多檔案excel
     * @param merchantName
     * @param orderSource
     * @param orderImportFileList
     * @param fileIndexList
     * @return
     */
    @RequestMapping(value = "/parseDuoFileExcel",method=RequestMethod.POST)
    @ResponseBody
    public Object parseDuoFileExcel(
    @RequestParam("merchantName") String merchantName,
    @RequestParam("orderSource") String orderSource,
    @RequestParam("orderImportFile[]") List<CommonsMultipartFile> orderImportFileList) {
    Date opTime = new Date();
    String orderVersion = DateUtils.formatDate(opTime, DateUtils.COMPACTDATETIME_FORMAT);
    Map<String,Object> map=new HashMap<String, Object>();
   
//CommonsMultipartFile orderImportFile = orderImportFileList.get(j);
    //String suffix = orderImportFile.getFileItem().getName();
       try {
        if(orderSource.equals(Constant.ORDER_SOURCE_TM)){//天貓
        map = orderImportTmServiceImpl.parseDuoExcel_2007(merchantName,orderVersion,orderSource,
        orderImportFileList,null);
        }else{
        return "{result:0,msg:'解析出現異常！'}";
        }
    }catch (Exception e) {
    e.printStackTrace();
    return "{result:0,msg:'解析出現異常！'}";
    }
   return map;
    }
    



/**
     * 解析普通excel
     * @param merchantName
     * @param orderSource
     * @param orderImportFile
     * @return
     */
    @RequestMapping(value = "/parseExcel",method=RequestMethod.POST)
    @ResponseBody
    public Object parseExcel(@RequestParam("merchantName") String merchantName,
    @RequestParam("orderSource") String orderSource,
    @RequestParam("orderImportFile[]") List<CommonsMultipartFile> orderImportFileList) {
    Map<String,Object> map = null;
    for (int i = 0; i < orderImportFileList.size(); i++) {
    CommonsMultipartFile orderImportFile = orderImportFileList.get(i);
    String suffix = orderImportFile.getFileItem().getName();
       try {
        //1-2003excel
        if(suffix.endsWith(Constant.EXCEL_SUFFIX_2003)){
        if(orderSource.equals(Constant.ORDER_SOURCE_YHD)){//1號店
        map = orderImportYhdServiceImpl.parseExcel_2003(merchantName,orderSource,orderImportFile);
        }else if(orderSource.equals(Constant.ORDER_SOURCE_JD)){//京東
        map = orderImportJdServiceImpl.parseExcel_2003(merchantName,orderSource,orderImportFile);
        }else if(orderSource.equals(Constant.ORDER_SOURCE_TM)){//天貓
        map = orderImportTmServiceImpl.parseExcel_2003(merchantName,orderSource,orderImportFile);
        }
        }
        //2-2007以上excel
        else if(suffix.endsWith(Constant.EXCEL_SUFFIX_2007)){
        if(orderSource.equals(Constant.ORDER_SOURCE_YHD)){//1號店
        map = orderImportYhdServiceImpl.parseExcel_2007(merchantName,orderSource,orderImportFile);
        }else if(orderSource.equals(Constant.ORDER_SOURCE_JD)){//京東
        map = orderImportJdServiceImpl.parseExcel_2007(merchantName,orderSource,orderImportFile);
        }else if(orderSource.equals(Constant.ORDER_SOURCE_TM)){//天貓
        map = orderImportTmServiceImpl.parseExcel_2007(merchantName,orderSource,orderImportFile);
        }
        }else{
        return "{result:0,msg:'解析出現異常！'}";
        }
    }catch (Exception e) {
    e.printStackTrace();
    return "{result:0,msg:'解析出現異常！'}";
    }
}
   
   return map;
    }
    

相關推薦

jquery ajax 多檔案Excel解析上傳

------jsp 前臺-------------------- <form  id="importOrderFrom" name="importOrderFrom"  method="post" enctype="multipart/form-data">&nb

Javascript與asp.net 實現Ajax多檔案無重新整理上傳

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w

通過jQuery Ajax使用FormData對象上傳文件

var href .get 只需要 初始 log query eve 對數 FormData對象，是可以使用一系列的鍵值對來模擬一個完整的表單，然後使用XMLHttpRequest發送這個"表單"。 在 Mozilla Developer 網站 使用FormData對象 有

使用AJAX實現檔案拖拽上傳功能詳解

概述 對於微雲、百度雲等網盤提供的檔案儲存服務而言，檔案上傳是一個重要功能。檔案上傳的方式主要有兩種：二進位制資料上傳、表單上傳。本文會詳細解析表單上傳的協議規範，前端上傳檔案的兩種方式：對話方塊選擇方式、拖拽選擇方式，服務端接收上傳的檔案以及檔案上傳

多檔案預覽上傳基於Struts

多檔案預覽上傳基於Struts 實現多檔案預覽，多檔案上傳，基於struts，使用jquery實現，邏輯簡單轉化為js等方便。 頁面程式碼 <html> <head> <link href="../../css/style.css

使用百度webuploader外掛進行多檔案型別分片上傳例項

jQuery(function() { function e(e) { var a = o('<li id="' + e.id + '"><p class="title">' + e.name + '</p><p cl

Bootstrap fileInput多檔案同步非同步上傳(C#)

網上關於該控制元件的使用文章還是比較多的，但是自己實踐和使用過程中還是出現點問題，自己寫點東西記錄下。 簡單說，該控制元件優勢支援同步、非同步上傳，介面美觀 所需css\js包，自尋尋找 bootstrap.css fileinput.css fileinput.mi

bootstrap多檔案預覽上傳

效果圖展示： 使用環境： 檔案上傳外掛：bootstrap-fileinput,文件地址 http://plugins.krajee.com/file-input#pre-requisites 前段ui框架：bootstrap3 ja

Excel檔案一鍵上傳並解析完成資料批量匯入資料庫

原來做檔案上傳的時候，都是有一個輸入框，點選上傳按鈕，先瀏覽檔案，選擇檔案後，把檔案的路徑儲存到form表單中，最後通過form表單提交到服務端。這樣的介面不是很美觀。為了使用者有更好地體驗(UE)，現在的大多數系統都是採用一鍵檔案上傳，使用者點選上傳按鈕，選擇

基於jquery的多檔案上傳

1、檔案上傳前臺設計 說到前臺設計，還真的有些不知道怎麼講好，還是老樣子，直接上圖來的直接，在此也說明下：本人不擅長做PS，所以很多素材（圖片）都是網上尋找的，這個上傳程式可以上傳各種檔案，至於哪些？我沒數過，我不介意你數一數，我就用簡單的圖片上傳來演示吧，附帶預覽功能。

java中解析上傳的excel檔案（xls,xlsx）

一、在maven庫中匯入相關依賴 其中poi是解析xls格式的，poi-ooxml是解析xlsx格式的 <!-- POI,excel解析相關 --> <dependency> <groupId>org.apache.poi</g

總結：ajax多檔案上傳，laravel後臺篇

我這裡後臺用的是php框架laravel寫的，如果你是用這個框架或者類似框架寫的話，可以參考下我寫的程式碼，如果是用其他語言寫的話，可以看看我寫的流程。 —————————————————————正文——————————————————————— con

總結：ajax多檔案上傳，帶進度條，前端篇

前言： 之前寫過一個檔案上傳的模組，但是是多個input上傳的，而且使用的是jQuery.form打包上傳的，這樣子就覺得還是有點不太方便。 1.提交的時候需要將整個form提交上去，換句話說就是需要將要提交的內容使用form

IT輪子系列（六）——Excel上傳與解析，一套代碼解決所有Excel業務上傳，你Get到了嗎

tryparse mappath src 個推 列名 import ges bject tab 前言 在日常開發當中，excel的上傳與解析是很常見的。根據業務不同，解析的數據模型也都不一樣。不同的數據模型也就需要不同的校驗邏輯，這往往需要寫多套的代碼進行字段的檢驗，如必填

ajax 上傳檔案，post上傳檔案，ajax 提交 JSON 格式的資料

ajax簡介 前後臺做資料互動 前後端做資料互動的方式（三種）：     （1）瀏覽器視窗輸入地址（get的方式）（2）form表單提交資料（3）ajax提交資料 特點 特點：　　（1）非同步 　　　　　　非同步與同步的區別：同步是請求發過去，要等著迴應；非同步不

Springmvc 檔案下載（上傳在Excel匯入中有，類似）

package com.ssm.controller; import java.io.File; import java.io.IOException; import org.apache.commons.io.FileUtils; import org.springfr

JAVA -- 生成Excel 並上傳到 FTP 不生成本地檔案

直接上程式碼 POM.XML 這裡只是主要的jar <!-- https://mvnrepository.com/artifact/org.apache.poi/poi-ooxml --> <dependency> <groupId>

python傳送post請求上傳檔案，無法解析上傳的檔案

前言 近日，在做介面測試時遇到一個奇葩的問題。 使用post請求直接通過介面上傳檔案，無法識別檔案。 遇到的問題 以下是抓包得到的資訊： 以上請求是通過Postman直接傳送請求的。 在這裡可以看到訊息頭裡包含：Access-Token和Content-Type 因此在在使用python直接

WEB版一次選擇多個檔案進行批量上傳(swfupload)的解決方案

功能完全支援ie和firefox瀏覽器！       一般的WEB方式檔案上傳只能使用FileUpload控制元件進行一個檔案一個檔案的進行上傳，就算是批量上傳，也要把檔案一個一個的新增到頁面，無法如windows程式一樣，一次選擇多個檔案進行批量上傳。這樣在某些應用上就

怎麼用非同步ajax提交表單來上傳圖片檔案？

通常我們提交（使用submit button）時，會把form中的所有表格元素的name與value組成一個queryString，提交到後臺。這用jQuery的方法來說，就是serialize。通過$('#postForm').serialize()可以對form表單進行序