1. 程式人生 > 實用技巧 >layui 使用upload上傳模組以及NPOI 實現 xlsx 的匯入

layui 使用upload上傳模組以及NPOI 實現 xlsx 的匯入

前言

需求:在新增主表資訊的時候,可實現批量匯入功能。

具體步驟

具體介面設計。

如下圖所示:




程式碼實現步驟

首先,需要新增NPOI的引用。

專案需要引用以下dll

ICSharpCode.SharpZipLib.dll
NPOI.dll
NPOI.OOXML.dll
NPOI.OpenXml4Net.dll
NPOI.OpenXmlFormats.dll

2.編寫匯入幫助類。

程式碼如下圖所示:

public class ExcelHelper
{
        #region 1.Excel匯入

        /// <summary>
        /// 從Excel取資料並記錄到List集合裡
        /// </summary>
        /// <param name="cellHeard">單元頭的值和名稱:{ { "UserName", "姓名" }, { "Age", "年齡" } };</param>
        /// <param name="filePath">儲存檔案絕對路徑</param>
        /// <param name="errorMsg">錯誤資訊</param>
        /// <returns>轉換後的List物件集合</returns>
        public static List<T> ExcelToEntityList<T>(Dictionary<string, string> cellHeard, 
        string filePath, out StringBuilder errorMsg) where T : new()
        {
            List<T> enlist = new List<T>();
            errorMsg = new StringBuilder();
            try
            {
                if (Regex.IsMatch(filePath, ".xlsx")) // 2003
                {
                    enlist = Excel2003ToEntityList<T>(cellHeard, filePath, out errorMsg);
                }
                //else if (Regex.IsMatch(filePath, ".xlsx$")) // 2007
                //{
                //    //return FailureResultMsg("請選擇Excel檔案"); // 未設計
                //}
                return enlist;
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

        /// <summary>
        /// 從Excel2003取資料並記錄到List集合裡
        /// </summary>
        /// <param name="cellHeard">單元頭的Key和Value:{ { "UserName", "姓名" }, { "Age", "年齡" } };</param>
        /// <param name="filePath">儲存檔案絕對路徑</param>
        /// <param name="errorMsg">錯誤資訊</param>
        /// <returns>轉換好的List物件集合</returns>
        private static List<T> Excel2003ToEntityList<T>(Dictionary<string, string> cellHeard, 
        string filePath, out StringBuilder errorMsg) where T : new()
        {
            errorMsg = new StringBuilder(); // 錯誤資訊,Excel轉換到實體物件時,會有格式的錯誤資訊
            List<T> enlist = new List<T>(); // 轉換後的集合
            List<string> keys = cellHeard.Keys.ToList(); // 要賦值的實體物件屬性名稱
            try
            {
                using (FileStream fs = File.OpenRead(HttpContext.Current.Server.MapPath(filePath)))
                {
                    //如果是xls,使用HSSFWorkbook;如果是xlsx,使用XSSFWorkbook
                    //XSSFWorkbook xfb = new XSSFWorkbook(fs);
                    XSSFWorkbook workbook = new XSSFWorkbook(fs);
                    XSSFSheet sheet = (XSSFSheet)workbook.GetSheetAt(0); // 獲取此檔案第一個Sheet頁
                    for (int i = 1; i <= sheet.LastRowNum; i++) // 從1開始,第0行為單元頭
                    {
                        // 1.判斷當前行是否空行,若空行就不在進行讀取下一行操作,結束Excel讀取操作
                        if (sheet.GetRow(i) == null)
                        {
                            break;
                        }

                        T en = new T();
                        string errStr = ""; // 當前行轉換時,是否有錯誤資訊,格式為:第1行資料轉換異常:XXX列;
                        for (int j = 0; j < keys.Count; j++)
                        {
                            // 2.若屬性頭的名稱包含'.',就表示是子類裡的屬性,那麼就要遍歷子類,eg:UserEn.TrueName
                            if (keys[j].IndexOf(".") >= 0)
                            {
                                // 2.1解析子類屬性
                                string[] properotyArray = keys[j].Split(new string[] { "." }, StringSplitOptions.RemoveEmptyEntries);
                                string subClassName = properotyArray[0]; // '.'前面的為子類的名稱
                                string subClassProperotyName = properotyArray[1]; // '.'後面的為子類的屬性名稱
                                System.Reflection.PropertyInfo subClassInfo = en.GetType().GetProperty(subClassName); // 獲取子類的型別
                                if (subClassInfo != null)
                                {
                                    // 2.1.1 獲取子類的例項
                                    var subClassEn = en.GetType().GetProperty(subClassName).GetValue(en, null);
                                    // 2.1.2 根據屬性名稱獲取子類裡的屬性資訊
                                    System.Reflection.PropertyInfo properotyInfo = subClassInfo.PropertyType.GetProperty(subClassProperotyName);
                                    if (properotyInfo != null)
                                    {
                                        try
                                        {
                                            // Excel單元格的值轉換為物件屬性的值,若型別不對,記錄出錯資訊
                                            properotyInfo.SetValue(subClassEn, GetExcelCellToProperty(properotyInfo.PropertyType, 
                                            sheet.GetRow(i).GetCell(j)), null);
                                        }
                                        catch (Exception e)
                                        {
                                            if (errStr.Length == 0)
                                            {
                                                errStr = "第" + i + "行資料轉換異常:";
                                            }
                                            errStr += cellHeard[keys[j]] + "列;";
                                        }

                                    }
                                }
                            }
                            else
                            {
                                // 3.給指定的屬性賦值
                                System.Reflection.PropertyInfo properotyInfo = en.GetType().GetProperty(keys[j]);
                                if (properotyInfo != null)
                                {
                                    try
                                    {
                                        // Excel單元格的值轉換為物件屬性的值,若型別不對,記錄出錯資訊
                                        properotyInfo.SetValue(en, GetExcelCellToProperty(properotyInfo.PropertyType, 
                                        sheet.GetRow(i).GetCell(j)), null);
                                    }
                                    catch (Exception e)
                                    {
                                        if (errStr.Length == 0)
                                        {
                                            errStr = "第" + i + "行資料轉換異常:";
                                        }
                                        errStr += cellHeard[keys[j]] + "列;";
                                    }
                                }
                            }
                        }
                        // 若有錯誤資訊,就新增到錯誤資訊裡
                        if (errStr.Length > 0)
                        {
                            errorMsg.AppendLine(errStr);
                        }
                        enlist.Add(en);
                    }
                }
                return enlist;
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

        #endregion Excel匯入

        #region 2.Excel匯出

        /// <summary>
        /// 實體類集合匯出到EXCLE2003
        /// </summary>
        /// <param name="cellHeard">單元頭的Key和Value:{ { "UserName", "姓名" }, { "Age", "年齡" } };</param>
        /// <param name="enList">資料來源</param>
        /// <param name="sheetName">工作表名稱</param>
        /// <returns>檔案的下載地址</returns>
        public static string EntityListToExcel2003(Dictionary<string, string> cellHeard, IList enList, string sheetName)
        {
            try
            {
                string fileName = sheetName + "-" + DateTime.Now.ToString("yyyyMMddHHmmssfff") + ".xls"; // 檔名稱
                string urlPath = "UpFiles/ExcelFiles/" + fileName; // 檔案下載的URL地址,供給前臺下載
                string filePath = HttpContext.Current.Server.MapPath("\\" + urlPath); // 檔案路徑

                // 1.檢測是否存在資料夾,若不存在就建立個資料夾
                string directoryName = Path.GetDirectoryName(filePath);
                if (!Directory.Exists(directoryName))
                {
                    Directory.CreateDirectory(directoryName);
                }

                // 2.解析單元格頭部,設定單元頭的中文名稱
                HSSFWorkbook workbook = new HSSFWorkbook(); // 工作簿
                ISheet sheet = workbook.CreateSheet(sheetName); // 工作表
                IRow row = sheet.CreateRow(0);
                List<string> keys = cellHeard.Keys.ToList();
                for (int i = 0; i < keys.Count; i++)
                {
                    row.CreateCell(i).SetCellValue(cellHeard[keys[i]]); // 列名為Key的值
                }

                // 3.List物件的值賦值到Excel的單元格里
                int rowIndex = 1; // 從第二行開始賦值(第一行已設定為單元頭)
                foreach (var en in enList)
                {
                    IRow rowTmp = sheet.CreateRow(rowIndex);
                    for (int i = 0; i < keys.Count; i++) // 根據指定的屬性名稱,獲取物件指定屬性的值
                    {
                        string cellValue = ""; // 單元格的值
                        object properotyValue = null; // 屬性的值
                        System.Reflection.PropertyInfo properotyInfo = null; // 屬性的資訊

                        // 3.1 若屬性頭的名稱包含'.',就表示是子類裡的屬性,那麼就要遍歷子類,eg:UserEn.UserName
                        if (keys[i].IndexOf(".") >= 0)
                        {
                            // 3.1.1 解析子類屬性(這裡只解析1層子類,多層子類未處理)
                            string[] properotyArray = keys[i].Split(new string[] { "." }, StringSplitOptions.RemoveEmptyEntries);
                            string subClassName = properotyArray[0]; // '.'前面的為子類的名稱
                            string subClassProperotyName = properotyArray[1]; // '.'後面的為子類的屬性名稱
                            System.Reflection.PropertyInfo subClassInfo = en.GetType().GetProperty(subClassName); // 獲取子類的型別
                            if (subClassInfo != null)
                            {
                                // 3.1.2 獲取子類的例項
                                var subClassEn = en.GetType().GetProperty(subClassName).GetValue(en, null);
                                // 3.1.3 根據屬性名稱獲取子類裡的屬性型別
                                properotyInfo = subClassInfo.PropertyType.GetProperty(subClassProperotyName);
                                if (properotyInfo != null)
                                {
                                    properotyValue = properotyInfo.GetValue(subClassEn, null); // 獲取子類屬性的值
                                }
                            }
                        }
                        else
                        {
                            // 3.2 若不是子類的屬性,直接根據屬性名稱獲取物件對應的屬性
                            properotyInfo = en.GetType().GetProperty(keys[i]);
                            if (properotyInfo != null)
                            {
                                properotyValue = properotyInfo.GetValue(en, null);
                            }
                        }

                        // 3.3 屬性值經過轉換賦值給單元格值
                        if (properotyValue != null)
                        {
                            cellValue = properotyValue.ToString();
                            // 3.3.1 對時間初始值賦值為空
                            if (cellValue.Trim() == "0001/1/1 0:00:00" || cellValue.Trim() == "0001/1/1 23:59:59")
                            {
                                cellValue = "";
                            }
                        }

                        // 3.4 填充到Excel的單元格里
                        rowTmp.CreateCell(i).SetCellValue(cellValue);
                    }
                    rowIndex++;
                }

                // 4.生成檔案
                FileStream file = new FileStream(filePath, FileMode.Create);
                workbook.Write(file);
                file.Close();

                // 5.返回下載路徑
                return urlPath;
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

        #endregion Excel匯出

        #region 3.儲存Excel檔案
        /// <summary>
        /// 儲存Excel檔案
        /// <para>Excel的匯入匯出都會在伺服器生成一個檔案</para>
        /// <para>路徑:UpFiles/ExcelFiles</para>
        /// </summary>
        /// <param name="file">傳入的檔案物件</param>
        /// <returns>如果儲存成功則返回檔案的位置;如果儲存失敗則返回空</returns>
        public static string SaveExcelFile(HttpPostedFile file)
        {
            try
            {
                var fileName = file.FileName.Insert(file.FileName.LastIndexOf('.'), "-" + DateTime.Now.ToString("yyyyMMddHHmmssfff"));
                var filePath = Path.Combine(HttpContext.Current.Server.MapPath("~/WebExcel/UpFiles/ExcelFiles"), fileName);
                string directoryName = Path.GetDirectoryName(filePath);
                if (!Directory.Exists(directoryName))
                {
                    Directory.CreateDirectory(directoryName);
                }
                file.SaveAs(filePath);
                return filePath;
            }
            catch
            {
                return string.Empty;
            }
        }
        #endregion

        #region 4.從Excel獲取值傳遞到物件的屬性裡
        /// <summary>
        /// 從Excel獲取值傳遞到物件的屬性裡
        /// </summary>
        /// <param name="distanceType">目標物件型別</param>
        /// <param name="sourceCell">物件屬性的值</param>
        private static Object GetExcelCellToProperty(Type distanceType, ICell sourceCell)
        {
            object rs = distanceType.IsValueType ? Activator.CreateInstance(distanceType) : null;

            // 1.判斷傳遞的單元格是否為空
            if (sourceCell == null || string.IsNullOrEmpty(sourceCell.ToString()))
            {
                return rs;
            }

            // 2.Excel文字和數字單元格轉換,在Excel裡文字和數字是不能進行轉換,所以這裡預先存值
            object sourceValue = null;
            switch (sourceCell.CellType)
            {
                case CellType.Blank:
                    break;

                case CellType.Boolean:
                    break;

                case CellType.Error:
                    break;

                case CellType.Formula:
                    break;

                case CellType.Numeric:
                    sourceValue = sourceCell.NumericCellValue;
                    break;

                case CellType.String:
                    sourceValue = sourceCell.StringCellValue;
                    break;

                case CellType.Unknown:
                    break;

                default:
                    break;
            }

            string valueDataType = distanceType.Name;

            // 在這裡進行特定型別的處理
            switch (valueDataType.ToLower()) // 以防出錯,全部小寫
            {
                case "string":
                    rs = sourceValue.ToString();
                    break;
                case "int":
                case "int16":
                case "int32":
                    rs = (int)Convert.ChangeType(sourceCell.NumericCellValue.ToString(), distanceType);
                    break;
                case "float":
                case "single":
                    rs = (float)Convert.ChangeType(sourceCell.NumericCellValue.ToString(), distanceType);
                    break;
                case "datetime":
                    rs = sourceCell.DateCellValue;
                    break;
                case "guid":
                    rs = (Guid)Convert.ChangeType(sourceCell.NumericCellValue.ToString(), distanceType);
                    return rs;
            }
            return rs;
        } 
        #endregion
}

3.我們需要新增介面檢視。

程式碼如下所示:

<div class="layui-row">
   <div class="layui-col-lg12 layui-col-md12 ">
       <div class="layui-form-item my-margin"><b>車輛資訊</b></div>
       <hr class="layui-bg-green">
       <button class="layui-btn" id="btnAddCLXX">新增</button>
       <button class="layui-btn layui-btn-warm" id="btnDRCLXX">匯入</button>
       <div class="table-scroll">
           <table class="layui-table" id="tabCLXX" style="margin:0px;">
              <thead>
                 <tr>
                    <th>車牌號碼</th>
                    <th>掛車號碼</th>
                    <th>司機姓名1</th>
                    <th>身份證號1</th>
                    <th>手機號1</th>
                    <th>司機姓名2</th>
                    <th>身份證號2</th>
                    <th>手機號2</th>
                    <th>裝車數量</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                   <tr class="list">
                      <td><input type="text" lay-verify="required" class="layui-input"/></td>
                      <td><input type="text" class="layui-input"  /></td>
                      <td><input type="text" lay-verify="required" class="layui-input"/></td>
                      <td><input type="text" class="layui-input"  /></td>
                      <td><input type="text" class="layui-input"  /></td>
                      <td><input type="text" class="layui-input"  /></td>
                      <td><input type="text" class="layui-input"  /></td>
                      <td><input type="text" class="layui-input"  /></td>
                      <td><input type="text" class="layui-input"  value="0.000" /></td>
                      <td><button class="layui-btn layui-btn-danger btnDelRow">刪除</button></td>
                    </tr>
                 </tbody>
            </table>
         </div>
    </div>
</div>
<script type="text/javascript">
 /*匯入-車牌號碼*/
$("#btnDRCLXX").click(function () {
    parent.layer.open({
         type: 2,
         title: '匯入資訊',
         amin: 4,
         shadeClose: true,
         shade: 0.8,
         area: ['80%', '65%'],
         btn: ["匯入", '關閉'],
         content: '../xxxx/DrCarList',
         success: function (layero, index) { },
         yes: function (index, layero) {
              var obj = $(layero).find("iframe")[0].contentWindow;
              $(layero).find("iframe")[0].contentWindow.$('#saveBtn').click();//執行子頁面的按鈕點選事件
              var mJson = obj.$('#Hi_Data').val();
              if (mJson != "") {
                   var mJSON = $.parseJSON(mJson);
                   $("#tabCLXX tr:gt(0)").remove();
                   var str_rows = "";
                   $.each(mJSON, function (i, obj) {
                        var mxxx = obj.xx== null ? '' : obj.cCarNo;
                        var mxxx = obj.xx== null ? '' : obj.xxx;
                        var mxxx = obj.xx== null ? '' : obj.xxx;
                        var mxxx = obj.xx== null ? '' : obj.xxx;
                        var mxxx = obj.xx== null ? '' : obj.xxx;
                        var mxxx = obj.xx== null ? '' : obj.xxx;
                        var mxxx = obj.xx== null ? '' : obj.xxx;
                        var mxxx = obj.xx== null ? '' : obj.xxx;
                        var mxxx = obj.xx== null ? parseFloat(0).toFixed(3) : obj.xxx;
                        str_rows += '<tr class="list">';
                        str_rows += '<td><input type="text"  class="layui-input" value="' + mxxx + '" lay-verify="required"/></td>';
                        str_rows += '<td><input type="text"  class="layui-input" value="' + mxxx + '"/></td>';
                        str_rows += '<td><input type="text"  class="layui-input" value="' + mxxx + '" lay-verify="required"/></td>';
                        str_rows += '<td><input type="text"  class="layui-input" value="' + mxxx + '" /></td>';
                        str_rows += '<td><input type="text"  class="layui-input" value="' + mxxx + '" /></td>';
                        str_rows += '<td><input type="text"  class="layui-input" value="' + mxxx + '" /></td>';
                        str_rows += '<td><input type="text"  class="layui-input" value="' + mxxx + '"/></td>';
                        str_rows += '<td><input type="text"  class="layui-input" value="' + mxxx + '"/></td>';
                        str_rows += '<td><input type="text"  class="layui-input" value="' + mxxx + '" /></td>';
                        str_rows += '<td><button class="layui-btn layui-btn-danger btnDelRow">刪除</button></td>';
                        str_rows += '</tr>';
                    });
                    $("#tabCLXX").append(str_rows);
                    DelRow();
               }         
             },
         cancel: function (index, layero) { },
         end: function () { }
     });
     return false;
});
/*刪除行*/
function DelRow() {
     $(".btnDelRow").on("click", function () {
          $(this).parent().parent().remove();
     });
}
</script>

4.然後,建立上傳檔案DrCarList檢視介面。

程式碼如下所示:

<head>
    <meta name="viewport" content="width=device-width" />
    <title>匯入資訊</title>
    <link href="~/Pulgs/layui/css/layui.css" rel="stylesheet" />
    <style>
        .table-scroll {
            height: 40vh;
            overflow-y: scroll;
            margin-bottom: 15px;
            margin-top: 10px;
            background-color: #fbfbfb;
        }

    </style>
</head>
<body>
    <fieldset class="layui-elem-field" style="width:95%;margin:10px auto;">
        <div class="layui-field-box">
            <div class="layui-form-item my-margin"><b>上傳檔案</b></div>
            <hr class="layui-bg-green">
            <div class="layui-fluid">
                <div class="layui-row">
                    <div class="layui-col-lg12 layui-col-md12">
                        <div class="layui-upload">
                            <button type="button" class="layui-btn layui-btn-normal" id="upfile">選擇檔案</button>
                            <button type="button" class="layui-btn" id="btnupfile">開始上傳</button>
                            <a href="~/Upload/moduls/裝車出庫作業列表模板.xlsx">下載模板</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
    <fieldset class="layui-elem-field" style="width:95%;margin:10px auto;">
        <div class="layui-field-box">
            <div class="layui-form-item my-margin"><b>車輛資訊</b></div>
            <hr class="layui-bg-green">
            <div class="layui-fluid">
                <div class="layui-row">
                    <div class="layui-col-lg12 layui-col-md12">
                        <div class="table-scroll">
                            <table class="layui-table" id="tabCLXX" style="margin:0px;">
                                <thead>
                                    <tr>
                                        <th style="width: 100px;">車牌號碼</th>
                                        <th>掛車號碼</th>
                                        <th style="width: 100px;">司機姓名1</th>
                                        <th>身份證號1</th>
                                        <th>手機號1</th>
                                        <th>司機姓名2</th>
                                        <th>身份證號2</th>
                                        <th>手機號2</th>
                                        <th>裝車數量</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="list">
                                        <td><input type="text" class="layui-input" /></td>
                                        <td><input type="text" class="layui-input" /></td>
                                        <td><input type="text" class="layui-input" /></td>
                                        <td><input type="text" class="layui-input" /></td>
                                        <td><input type="text" class="layui-input" /></td>
                                        <td><input type="text" class="layui-input" /></td>
                                        <td><input type="text" class="layui-input" /></td>
                                        <td><input type="text" class="layui-input" /></td>
                                        <td><input type="text" class="layui-input" value="0.000" /></td>
                                        <td><button class="layui-btn layui-btn-danger btnDelRow">刪除</button></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="laui-row" style="display:none;">
                        <input type="text" class="layui-input" id="Hi_Data"/>
                    </div>
                </div>
                <div class="layui-row" style="display:none;">
                    <div class="layui-form-item">
                        <div style="text-align: center;">
                            <button class="layui-btn" id="saveBtn"></button>
                            <button type="reset" class="layui-btn" id="reset"></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
    <!--引用jquery-->
    <script src="~/Content/js/jquery-1.12.4.min.js"></script>
    <!--引用layui-->
    <script src="~/Pulgs/layui/layui.js"></script>
    <script type="text/javascript">
        layui.use('upload', function () {
            var upload = layui.upload;
            //選完檔案後不自動上傳
            upload.render({
                elem: '#upfile',
                url: '../xxx/UpFiles', //改成您自己的上傳介面
                accept: 'file',
                auto: false,
                bindAction: '#btnupfile',
                done: function (res) {
                    layer.msg('上傳成功');
                    //layer.close(index);
                    if (res.code == 0) {
                        var p = res.data;
                        var filePath = p.src;
                        GetData(filePath);
                        //$("#imgsrc").val(p.src);
                        //$("#ShowVideo").html("");
                    } else {
                        layer.message("上傳失敗,請重試");
                    }
                }
            });
            DelRow();
            /*匯入*/
            $("#saveBtn").click(function () {
                var mArr = [];
                var tr = $("#tabCLXX tr:gt(0)");
                for (var i = 0; i < tr.length; i++) {
                    var td = $(tr[i]);
                    var x = td.children().children().val();
                    var xx= td.children().next().children().val();
                    var xxx= td.children().next().next().children().val();
                    var xxxx= td.children().next().next().next().children().val();
                    var xxxxx= td.children().next().next().next().next().children().val();
                    var xxxxxx= td.children().next().next().next().next().next().children().val();
                    var xxxxxxx= td.children().next().next().next().next().next().next().children().val();
                    var xxxxxxxx= td.children().next().next().next().next().next().next().next().children().val();
                    var xxxxxxxxx= td.children().next().next().next().next().next().next().next().next().children().val();

                    mArr.push({
                        x: "" + x+ "",
                        xx: "" + xx+ "",
                        xxx: "" + xxx+ "",
                        xxxx: "" + xxxx+ "",
                        xxxxx: "" + xxxxx+ "",
                        xxxxxx: "" + xxxxxx+ "",
                        xxxxxxx: "" + xxxxxxx+ "",
                        xxxxxxxx: "" + xxxxxxx+ "",
                        xxxxxxxxx: "" + xxxxxxxx+ ""
                    });
                }
                $("#Hi_Data").val(JSON.stringify(mArr));
                if ($("#Hi_Data").val() != "") {
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                }
            });
            /*取消*/
            $("#btnCancel").click(function () {
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            });
        });
        /*刪除行*/
        function DelRow() {
            $(".btnDelRow").on("click", function () {
                $(this).parent().parent().remove();
            });
        }
        /*獲取資料*/
        function GetData(filePath) {
            $.get('../xxx/ImportCarNo?filePath=' + filePath, function (msg) {
                if (msg != "") {
                    var mMsg = $.parseJSON(msg);
                    if (mMsg.success == true) {
                        $("#tabCLXX tr:gt(0)").remove();
                        var str_rows = '';
                        $.each(mMsg.data, function (i, obj) {
                            var mx = obj.x== null ? '' : obj.x;
                            var mxx = obj.xx== null ? '' : obj.xx;
                            var mxxx = obj.xxx== null ? '' : obj.xxx;
                            var mxxxx = obj.xxxx== null ? '' : obj.xxxx;
                            var mxxxxx = obj.xxxxx== null ? '' : obj.xxxxx;
                            var mxxxxxx = obj.xxxxxx == null ? '' : obj.xxxxxx;
                            var mxxxxxxx = obj.xxxxxxx== null ? '' : obj.xxxxxxx;
                            var mxxxxxxxx = obj.xxxxxxxx== null ? '' : obj.xxxxxxxx;
                            var mxxxxxxxxx = obj.xxxxxxxxx== null ? 0 : obj.xxxxxxxxx;
                            str_rows += '<tr class="list">';
                            str_rows += '<td><input type="text"  class="layui-input" value="' + mx + '"  /></td>';
                            str_rows += '<td><input type="text"  class="layui-input" value="' + mxx + '"/></td>';
                            str_rows += '<td><input type="text"  class="layui-input" value="' + mxxx + '"/></td>';
                            str_rows += '<td><input type="text"  class="layui-input" value="' + mxxxx + '" /></td>';
                            str_rows += '<td><input type="text"  class="layui-input" value="' + mxxxxx + '" /></td>';
                            str_rows += '<td><input type="text"  class="layui-input" value="' + mxxxxxx + '"/></td>';
                            str_rows += '<td><input type="text"  class="layui-input" value="' + mxxxxxxx + '"/></td>';
                            str_rows += '<td><input type="text"  class="layui-input" value="' + mxxxxxxxx + '"/></td>';
                            str_rows += '<td><input type="text"  class="layui-input" value="' + mxxxxxxxxx + '" ></td>';
                            str_rows += '<td><button class="layui-btn layui-btn-danger btnDelRow">刪除</button></td>';
                            str_rows += '</tr>';
                        });
                        $("#tabCLXX").append(str_rows);
                    } else {
                        msg = '轉換失敗!\r\n';
                    }
                }
            });
        }
    </script>

</body>

5.實現上傳檔案方法。

程式碼如下所示:

#region 14.上傳檔案
/// <summary>
/// 上傳檔案
/// </summary>
/// <returns></returns>
public JsonResult UpFiles() {
      var result = new Dictionary<string, object>();
      result["code"] = -1;
      Dictionary<string, object> data = new Dictionary<string, object>();
      try
      {
         //string editor = Request["e"];//e=1,表示editor
         string t = Request["file"];//型別,img,表示圖片類的,file表示檔案類
         //string selfPath = Request["p"];//自定義資料夾名稱
         var file = Request.Files[0]; //獲取選中檔案  
         Stream stream = file.InputStream;    //將檔案轉為流 
         string ext = file.FileName.Substring(file.FileName.LastIndexOf('.'));

         //檔案儲存位置及命名,精確到毫秒並附帶一組隨機數,防止檔案重名,資料庫儲存路徑為此變數  
         string dir = "/Upload/upFile/";
         string rootPath = Server.MapPath(dir);
         if (!Directory.Exists(rootPath))
              Directory.CreateDirectory(rootPath);
         Random ran = new Random((int)DateTime.Now.Ticks);//利用時間種子解決偽隨機數短時間重複問題  
         string fileName = DateTime.Now.ToString("mmssms") + ran.Next(99999);
         string serverPath = dir + fileName + ext;

         //路徑對映為絕對路徑  
         string path = Server.MapPath(serverPath);
         if (t == "img")
         {
             System.Drawing.Image img = System.Drawing.Image.FromStream(stream);//將流中的圖片轉換為Image圖片物件  
             img.Save(path, System.Drawing.Imaging.ImageFormat.Jpeg);//圖片儲存,JPEG格式圖片較小  
          }
          else
          {
             file.SaveAs(path);
             data.Add("src", serverPath);
             data.Add("title", fileName);
             result["data"] = data;
             result["code"] = 0;
           }
         }
         catch (Exception ex)
         {
            result["code"] = -1;
           //LogerHelper.Error(ex);
         }
         return Json(result, JsonRequestBehavior.AllowGet);
}
#endregion

6.獲取上傳路徑,實現xlsx匯入。

程式碼如下所示:

#region 13.匯入車牌號碼
public string ImportCarNo(string filePath)
{
      try
      {
         StringBuilder errorMsg = new StringBuilder(); // 錯誤資訊

         #region 1.獲取Excel檔案並轉換為一個List集合

        // 1.1存放Excel檔案到本地伺服器
        //HttpPostedFile filePost = context.Request.Files["filed"]; // 獲取上傳的檔案
        //string filePath = ExcelHelper.SaveExcelFile(filePost); // 儲存檔案並獲取檔案路徑
        // 單元格抬頭
        // key:實體物件屬性名稱,可通過反射獲取值
        // value:屬性對應的中文註解
        Dictionary<string, string> cellheader = new Dictionary<string, string> {
                    { "x", "車牌號碼" },
                    { "xx", "掛車號碼" },
                    { "xxx", "司機姓名1" },
                    { "xxxx", "身份證號1" },
                    { "xxxxx", "手機號碼1" },
                    { "xxxxxx", "司機姓名2" },
                    { "xxxxxxx", "身份證號2" },
                    { "xxxxxxxx", "手機號碼2" },
                    { "xxxxxxxxx", "裝車數量" }
          };

        // 1.2解析檔案,存放到一個List集合裡
        List<xxx> enlist = ExcelHelper.ExcelToEntityList<xxx>(cellheader, filePath, out errorMsg);

        #endregion

        #region 2.1檢測必填項是否必填
        for (int i = 0; i < enlist.Count; i++)
        {
            xxx en = enlist[i];
            string errorMsgStr = "第" + (i + 1) + "行資料檢測異常:";
            bool isHaveNoInputValue = false; // 是否含有未輸入項
            if (string.IsNullOrEmpty(en.xxx))
            {
               errorMsgStr += "車牌號碼列不能為空;";
               isHaveNoInputValue = true;
            }
            if (isHaveNoInputValue) // 若必填項有值未填
            {
               en.IsExcelVaildateOK = false;
               errorMsg.AppendLine(errorMsgStr);
            }
        }
        #endregion

        bool isSuccess = false;
        if (errorMsg.Length == 0)
        {
           isSuccess = true; // 若錯誤資訊成都為空,表示無錯誤資訊
        }
        var rs = new { success = isSuccess, msg = errorMsg.ToString(), data = enlist };
        return JsonConvert.SerializeObject(rs);
     }
     catch (Exception ex)
     {
       throw ex;
     }
}
#endregion

總結

至此,一個使用layuiupload的元件實現xlsx匯入的功能就已經實現了。實現過程,可能相對粗糙。俗話都說,話糙理不糙。

有什麼地方不對的歡迎大家提建議。謝謝~

你知道的越多,你不知道的越多。我們不生產知識,我們只是知識的搬運工。