前幾天寫公司的SpreadJS控件的測試用例時遇到一個需求，不通過input標簽的type=file的形式來實現本地文件選擇，而是直接指定自己想要上傳的文件（因為模擬ui行為的測試會占用大量的時間，影響測試效率）。一開始我認為這是不可能實現的，因為瀏覽器的安全性原因，js是不能直接訪問系統文件的（node.js除外）。ie瀏覽器支持使用FileSystemObject接口來訪問本地文件，但是其他瀏覽器均沒有實現。初步方案是利用后端語言去訪問系統文件然后轉換成base64格式返回給前端，前端將base64轉成file文件。 ####一、后端操作 后端語言可以很輕松地去訪問本地文件，我將文件對象存入到byte數組中并轉換成了base64的字符串傳給前端。后端代碼就不寫了，很簡單。 <br> ####二、.前端操作 我想通過后端的base64字符串來生成File對象的實例。這里就需要了解input標簽形式的文件上傳的底層原理。 ####1.input生成文件對象的原理 查閱w3c的文檔得知：在 HTML 文檔中` <input type="file"> `標簽每出現一次，一個 FileUpload 對象就會被創建。 該元素包含一個文本輸入字段，用來輸入文件名，還有一個按鈕，用來打開文件選擇對話框以便圖形化選擇文件。當用戶選擇了一個或多個文件點擊"打開"時，js會生成一個FileList數組來保存用戶所選擇的文件。FileList包含了一個或多個File對象。可以通過`document.getElemenById("uploadFile").files`來進行訪問。處于安全性的考慮，File對象不會暴露出文件的內容，它只提供了一些只讀的屬性來描述修改時間、文件類型、長度、名字等。  <br> ####2.創建File對象 js有一個底層的Blob對象，它是一個包含有只讀原始數據的類文件對象。File對象就繼承自Blob對象并擴展了系統文件的支持。 Blob對象的構造函數（來自MDN）： ~~~ Blob Blob( [optional] Array parts, [optional] BlobPropertyBag properties ); ~~~ 第一個參數是一個數組，里面可以是DOMString，也可以是TypeArray或者Blob。 這里需要解釋一下TypedArray：在JS語言中，數值只有一種稱為Number的類型，而不像C語言或底層CPU指令那樣區分是整型還是浮點型，是有符號的還是無符號的，是32位的還是64位的。Typed Array的主要是為了彌補JS處理二進制格式數據的不足，利用Typed Array可以非常方便地操作二進制的數據。TypedArray包括Int32Array、Uint8Array、Float32Array等，也可以是連續的內存緩沖區ArrayBuffer或者工具類DataView。 ~~~ var myFile=new Blob([u8arr],{type : 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}); ~~~ 第一個參數是一個Uint8Array的TypedArray類型，它是一個8比特的無符號的int數組，通過base64轉換而來。第二參數是該文件的mime類型，不同的文件類型可以參考w3c的mime手冊。 <br> ####3.base64的轉換 還剩最后一個問題，如何把base64轉成Uint8Array? js提供了window.atob(base64)的方式對base64進行解碼。再通過charCodeAt()的方式轉成Uint類型。代碼如下: ~~~ var bytes=window.atob(base64), //解碼 n=bytes.length, u8arr=new Uint8Array(n), while(n--){ u8arr[n]=bytes.charCodeAt(n); //將編碼轉換成Unicode編碼 } ~~~ 我對這一操作做了封裝: ~~~ //假設有一個xlsx文件 function createFile(urlData){ var bytes=window.atob(urlData), n=bytes.length, u8arr=new Uint8Array(n); while(n--){ u8arr[n]=bytes.charCodeAt(n); } return new Blob([u8arr],{type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}}); } var str=""; //str接收來自后端返回的base64 var myFile=createFile(str); ~~~ 現在就大功告成了。前端的文件對象已經成功生成。 <br> ####4.最終測試 我在代碼中創建一個鏈接去下載這個文件: ~~~ var a = document.createElement("a"); a.href =window.URL.createObjectURL(myFile); //下載路徑指向這個文件對象 a.download = "SunnyChuan.xlsx"; a.click(); //指定頁面自動下載文件 document.body.appendChild(a); ~~~ 頁面打開后會自動下載文件:  我們把文件打開測試一下整個流程中有沒有數據損失:  從圖中可以看出文件完成無損地傳到了前端。 這里有一個小插曲:用ie瀏覽器是無法下載的，因此需要做hack: ~~~ if(navigator.appVersion.toString().indexOf(".NET")>0){ window.navigator.msSaveBlob(myFile, "SunnyChuan.xlsx"); } else{ var a = document.createElement("a"); a.href =window.URL.createObjectURL(myFile); a.download = "SunnyChuan.xlsx"; a.click(); document.body.appendChild(a); } ~~~ 附上完整的代碼: ~~~ function createFile(urlData,fileType){ var bytes=window.atob(urlData), n=bytes.length, u8arr=new Uint8Array(n); while(n--){ u8arr[n]=bytes.charCodeAt(n); } return new Blob([u8arr],{type:fileType}); } var str=""; //str接收來自后端返回的base64 var fileType="";//指定mime var myFile=createFile(str,fileType); if(navigator.appVersion.toString().indexOf(".NET")>0){ window.navigator.msSaveBlob(myFile, "SunnyChuan.xlsx"); } else{ var a = document.createElement("a"); a.href =window.URL.createObjectURL(myFile); a.download = "SunnyChuan.xlsx"; a.click(); document.body.appendChild(a); } ~~~ ####三、總結 js一般是不可以直接訪問本地文件的，但是可以通過一些間接的方式去實現。js的文件操作一般用于下載文件以及保存圖片。我實習的公司就是通過將產品內部的圖片轉成base64，在需要使用的時候再轉換回圖片，這種方式不需要產品附帶圖片文件，產品最終只有一個js文件，極大地減少了產品尺寸。