在上傳之前解析angularjs控制器中的文件

我有angularjs應用程序，用戶應該能夠從文本文件導入數據。在上傳之前，我想從客戶端的文件中讀取幾行來做一些驗證。我正在使用https://github.com/nervgh/angular-file-upload上傳文件。我可以上傳文件並在服務器端進行驗證，但文件可能只有幾兆字節大小，如果數據無效，我不想創建不必要的流量。在上傳之前解析angularjs控制器中的文件

在我的控制器我有下面的代碼：

$scope.validateFile = function(file){ 

    console.log(file.name); 
    console.log(file.size);  
    var reader = new FileReader(); 

    reader.onloadend = function(evt){  
    console.log(evt.target.result); 
    //do something with file content here 
    }; 

    //var blob = file.slice(0, file.size - 1); 
    reader.readAsText(file); 

};

執行時，控制檯輸出文件名稱和大小。從那以後，我得到了follwoing錯誤：

TypeError: Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'.

當我刪除從以下線路評論...

var blob = file.slice(0, file.size - 1);

和改變的最後一行是：

reader.readAsText(blob);

這是來自控制檯的錯誤

TypeError: undefined is not a function

它看起來像切片功能不起作用。爲什麼slice（）不起作用？是否有可能這樣做？

UPDATE：

基於DTing的評論，我發現一個錯誤

我原來的HTML被

<input type="file" nv-file-select="" uploader="uploader" multiple /><br/> 
... 
<tr ng-repeat="item in uploader.queue"> 
... 
ng-click="validateFile(item.file)"

我已經最後一行改爲

ng-click="validateFile(item._file)"

現在作品。

來源

2015-04-03 A.Z.

你的代碼應該可以工作，所以你可能不會傳入一個文件到函數中。 'console.log（文件）'給你什麼？ – DTing 2015-04-03 09:17:30

謝謝你的回答。這是輸出的第一部分： FileLikeObject {lastModifiedDate：Fri Apr 03 2015 11:21:48 GMT + 0200（中歐夏令時），大小：47，輸入：「text/plain」，名稱：「test.txt 「，_createFromFakePath：function ...} – 2015-04-03 09:24:33

你沒有傳入你正在傳遞的文件，角度文件上傳用來表示複製名稱和大小的文件。除非你提供更多的代碼，並且我們看到你在調用這個函數的地方和方法，否則不能真正幫助解決這個問題。 – DTing 2015-04-03 09:33:04

看一看文件API規範，該部分的FileReader：https://developer.mozilla.org/en-US/docs/Web/API/FileReader

它有許多的.readAsXXX方法，這些應該讓你把它上傳到服務器之前檢查文件的內容。

來源

2015-04-23 19:04:38 btk

謝謝btk，這不是我正在尋找的，但它是原始問題的一個很好的擴展。我知道FILE API，我的問題是我正在使用一個錯誤的對象。感謝DTing，我解決了我的問題。我接受這個答案來關閉這個線程，因爲我不能接受DTing的評論。 – 2015-04-30 09:19:55

在上傳之前解析angularjs控制器中的文件

回答

相關問題