(二十五)JS實現導入文件功能 · Angularjs進階

# JS實現導入文件功能贈人玫瑰，手留余香。若您感覺此篇博文對您有用，請花費2秒時間點個贊，您的鼓勵是我不斷前進的動力，共勉！(PS:此篇博文是自己在午飯時間所寫，為此沒吃午飯，這就是程序猿的生活。![哭](https://box.kancloud.cn/2016-03-02_56d6ad912661e.gif) ) 項目開發過程中，需要實現文件上傳功能。借此機會學習之。使用HTML中現有的input?type?“file”可以支持這一功能。如下所示: <input ng-model="url" id="url" type="file"/> 瀏覽時只顯示指定文件類型 <input type="file" accept="application/msword" ><br><br>accept屬性列表<br> ? ? ? 1.accept="application/msexcel" ? ? ? 2.accept="application/msword" ? ? ? 3.accept="application/pdf" ? ? ? 4.accept="application/poscript" ? ? ? 5.accept="application/rtf" ? ? ? 6.accept="application/x-zip-compressed" ? ? ? 7.accept="audio/basic" ? ? ? 8.accept="audio/x-aiff" ? ? ? 9.accept="audio/x-mpeg" ? ? ? 10.accept="audio/x-pn/realaudio" ? ? ? 11.accept="audio/x-waw" ? ? ? 12.accept="image/gif" ? ? ? 13.accept="image/jpeg" ? ? ? 14.accept="image/tiff" ? ? ? 15.accept="image/x-ms-bmp" ? ? ? 16.accept="image/x-photo-cd" ? ? ? 17.accept="image/x-png" ? ? ? 18.accept="image/x-portablebitmap" ? ? ? 19.accept="image/x-portable-greymap" ? ? ? 20.accept="image/x-portable-pixmap" ? ? ? 21.accept="image/x-rgb" ? ? ? 22.accept="text/html" ? ? ? 23.accept="text/plain" ? ? ? 24.accept="video/quicktime" ? ? ? 25.accept="video/x-mpeg2" ? ? ? 26.accept="video/x-msvideo" 下面的問題是：如何獲得文件的上傳路徑，然后才能進行文件的讀寫后續操作。下面是一個圖片上傳、預覽的Demo: ~~~ <!doctype html> <html> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <title>Image preview example</title> <script type="text/javascript"> var loadImageFile = (function () { if (window.FileReader) { var oPreviewImg = null, oFReader = new window.FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; oFReader.onload = function (oFREvent) { if (!oPreviewImg) { var newPreview = document.getElementById("imagePreview"); oPreviewImg = new Image(); oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px"; oPreviewImg.style.height = (newPreview.offsetHeight).toString() + "px"; newPreview.appendChild(oPreviewImg); } oPreviewImg.src = oFREvent.target.result; arr = oPreviewImg.src.toString().split(","); alert(arr[0]); alert(arr[1]); }; return function () { var aFiles = document.getElementById("imageInput").files; if (aFiles.length === 0) { return; } if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image file!"); return; } oFReader.readAsDataURL(aFiles[0]); } } if (navigator.appName === "Microsoft Internet Explorer") { return function () { alert(document.getElementById("imageInput").value); document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value; } } })(); </script> <style type="text/css"> #imagePreview { width: 160px; height: 120px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); } </style> </head> <body> <div id="imagePreview"> </div> <form name="uploadForm"> <p> <input id="imageInput" type="file" name="myPhoto" onchange="loadImageFile();" /><br /> <input type="submit" value="Send" /></p> </form> </body> </html> ~~~ ### 測試通過測試，可得到文件的格式、編碼方式及編碼內容，如下所示: ?![](https://box.kancloud.cn/2016-03-02_56d6ad933b5ad.jpg) ![](https://box.kancloud.cn/2016-03-02_56d6ad93528b4.jpg) ### 領悟通過閱讀代碼，可以獲取到圖片的格式與編碼方式了。接下來就是文件的傳輸了。經歷了兩天的屈辱、不甘、痛苦掙扎，自己最終還是頑強的站了起來。晚上回到宿舍繼續掙扎，慢慢思路得以理清：在獲取到圖片的Base64編碼格式之后，自己就聯想到了之前寫過的文件傳輸代碼了，當然之前寫的都是一些基本的文件操作。由此，自己聯想，在這使用最原始的文件傳輸方法應該也可以實現。早晨到實驗室，自己先嘗試將圖片的Base64編碼傳輸至服務端，在服務端接收到客戶端傳輸來的Base64編碼后，采用Base64Img工具包([點擊下載工具包](http://download.csdn.net/detail/sunhuaqiang1/9394204))將Base64圖片編碼轉換為圖片格式，并保存至指定位置。初次嘗試，將圖片文件保存至本地是沒有問題的。經過更改一些細微的細節問題，將程序部署在阿里云服務器上，經過測試，SUCCESS! ### 核心代碼 ### html ~~~ <div style="padding-top: 15px"> <label for="pic">更新廣告圖片 :</label>  <input id="imageInput" type="file" accept="image/jpeg" onchange="loadImageFile();" /> <i id="img" hidden="hidden"></i> <i id="imgName" hidden="hidden"></i> </div> ~~~ ### javaScript ~~~ arr = oPreviewImg.src.toString().split(","); document.getElementById("img").innerHTML = arr[1]; document.getElementById("imgName").innerHTML = document.getElementById("imageInput").files[0].name; //alert(document.getElementById("img").innerHTML); //alert(document.getElementById("imageInput").files[0].name);// 獲取圖片名稱(PS:瞬間感覺自己好聰明啊~~) //alert(arr[0]);// 獲取圖片格式與編碼方式 //alert(arr[1]);// 獲取圖片Base 64編碼字節 ~~~ ### 程序截圖客戶端頂部顯示廣告信息： ?![](https://box.kancloud.cn/2016-03-02_56d6ad9387b94.jpg) 服務端廣告管理界面: ?![](https://box.kancloud.cn/2016-03-02_56d6ad93a6180.jpg) 服務端修改廣告信息界面: ?![](https://box.kancloud.cn/2016-03-02_56d6ad93c1f0c.jpg) ### 結語至此，自己的文件上傳操作終于完成了，一路坎坷，一路心酸。自己也曾嘗試過使用ng插件ng-file-upload(見參考文獻1)，但最終還是以失敗而告終，真心沒有搞明白代碼，仿照源代碼寫就是沒有效果，而且布局也不對，自己也是汗顏了。自己接下來要突破的問題就是分頁了，對于剛接觸到的知識，往往不明覺厲。 ### 參考文獻 1.[https://github.com/danialfarid/ng-file-upload](https://github.com/danialfarid/ng-file-upload) 2.[http://www.cnblogs.com/wolf-sun/p/4781673.html](http://www.cnblogs.com/wolf-sun/p/4781673.html) 3.[http://jsfiddle.net/danialfarid/maqbzv15/544/#update](http://jsfiddle.net/danialfarid/maqbzv15/544/#update) 4.[http://www.tuicool.com/articles/jQrQnmf](http://www.tuicool.com/articles/jQrQnmf) ![](https://box.kancloud.cn/2016-03-02_56d6ad93e76b5.jpg)