很多項目中可能需要從外部實時讀入文件,但不是上傳,對於這種該怎么實現呢。
日前,筆者也遇到一個類似的問題。就是項目中有一個文本框和導入按鈕,要求點擊按鈕時可以導入excel文件,然后能自動讀取其中的線路號顯示到文本中。毫無意外,便開始在網上搜索JS實現相關功能的帖子,也獲得了很多有用的經驗。可唯一的問題是,總會出現一些困然的小問題。也是為了給以后的小伙伴省下時間,筆者在這里給大家一個較好的實現。
不多說,先上代碼:
<html> <head> <title> New Document </title> <meta charset="utf-8"> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> var oWB = null; var oXL = null; function loadExcel() { $("#upfile").click(); //得到文件路徑的值 var filePath = $("#upfile").val(); //創建操作EXCEL應用程序的實例 try{ this.oXL = new ActiveXObject("Excel.Application"); try{ //打開指定路徑的excel文件 this.oWB = this.oXL.Workbooks.open(filePath); //獲取sheet數 var sheet = this.oWB.Worksheets.count; //返回所傳excel表格的sheet數供選擇 $("#sheet").css("display","block"); for(var i = 1;i <= sheet;i++){ var option = '<option value="'+i+'">-第'+i+'頁-</option>'; $("#sheet").append(option); } }catch(e){ alert("請設置瀏覽器啟用將文件上傳到瀏覽器時包含本地路徑!"); } }catch(e){ alert("請設置瀏覽器允許初始化和執行未標記為可安全執行腳本的ActiveX控件!"); } } function readexcel(){ var selsheet = $("#sheet").val(); var tempStr = []; //操縱所選sheet頁(從一開始,而非零) oWB.worksheets(parseInt(selsheet)).select(); var oSheet = oWB.ActiveSheet; //使用的行數和列數 var rows = oSheet.usedrange.rows.count; var columns = oSheet.usedrange.Columns.count; //查找線路號所在列 var j = 1; for(j;j <= columns; j++){ if(oSheet.Cells(1, j).value == "線路"){ break; } } try { //首行首列為表頭,默認不取值。 for (var i = 2; i <= rows; i++) { if(oSheet.Cells(i, j).value){ tempStr.push(oSheet.Cells(i, j).value) //tempStr += oSheet.Cells(i, 3).value + "," ; } } } catch(e) { $("#txtArea").val(tempStr); } $("#txtArea").val(tempStr); //退出操作excel的實例對象 //oXL.Application.Quit(); //手動調用垃圾收集器 //CollectGarbage(); } </script> </head> <body> <input type="text" id="txtArea" style="float:left;"/> <input type="file" id="upfile" style="float:left; display:none;" /> <select id="sheet" style="display:none; height:21px; float:left;" onchange="readexcel()"> <option value="" selected>-請選擇-</option> </select> <input type="button" style="float:left; height:21px;" onclick="loadExcel();" value="read"> <br> </body> </html>
運行結果圖:
因為excel中可能有多個sheet頁,因而筆者設計了一個自動加載頁數並根據頁數讀入數據的功能,大家可以適當跟着改一下。
另外,請讀者朋友們注意,此方法需要設置瀏覽器啟用將文件上傳到瀏覽器時包含本地路徑,以及允許或提示初始化和執行未標記為可安全執行腳本的ActiveX控件。