2017-04-02 28 views
0

我在angularjs項目中使用angular-file-upload模塊來上傳文件。我想使用FileUploader讀取文件內容並顯示在textarea中。使用angular-file-upload閱讀文件內容

請建議我如何能實現提前這個

感謝

控制器

'use strict'; 


angular.module('app', ['angularFileUpload']) 


.controller('AppController', ['$scope', 'FileUploader', function($scope, FileUploader) { 
    var uploader = $scope.uploader = new FileUploader({ 
     url: 'rest/fileupload' 
    }); 
    $scope.filecontent; 
    // CALLBACKS 

    uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) { 
     console.info('onWhenAddingFileFailed', item, filter, options); 
    }; 
    uploader.onAfterAddingFile = function(fileItem) { 
     console.info('onAfterAddingFile', fileItem); 
    }; 
    uploader.onAfterAddingAll = function(addedFileItems) { 
     console.info('onAfterAddingAll', addedFileItems); 
    }; 
    uploader.onBeforeUploadItem = function(item) { 
     console.info('onBeforeUploadItem', item); 
    }; 
    uploader.onProgressItem = function(fileItem, progress) { 
     console.info('onProgressItem', fileItem, progress); 
    }; 
    uploader.onProgressAll = function(progress) { 
     console.info('onProgressAll', progress); 
    }; 
    uploader.onSuccessItem = function(fileItem, response, status, headers) { 
     console.info('onSuccessItem', fileItem, response, status, headers); 
    }; 
    uploader.onErrorItem = function(fileItem, response, status, headers) { 
     console.info('onErrorItem', fileItem, response, status, headers); 
    }; 
    uploader.onCancelItem = function(fileItem, response, status, headers) { 
     console.info('onCancelItem', fileItem, response, status, headers); 
    }; 
    uploader.onCompleteItem = function(fileItem, response, status, headers) { 
     console.info('onCompleteItem', fileItem, response, status, headers); 
    }; 
    uploader.onCompleteAll = function() { 
     console.info('onCompleteAll'); 
    }; 

    console.info('uploader', uploader); 
}]); 

HTML

<body ng-controller="AppController" nv-file-drop="" uploader="uploader"> 
    <div class="well my-drop-zone" nv-file-over="" uploader="uploader">Base drop zone</div> 
</body> 

我想爲t $ scope.filecontent變量中的ake文件內容

+1

你嘗試過這麼遠嗎?請添加一些代碼。 – lin

+0

https://developer.mozilla.org/en/docs/Web/API/FileReader –

+0

@lin我添加了代碼 –

回答

0

回調werent因某種原因正常工作,因此一旦點擊「上傳」就被點擊了我的控制器中運行了一個函數,記錄文件內容,然後運行item.upload( )函數..我在下面附加了一個基本示例。

someFxn(item) { 
 
    console.log(item); 
 
     
 
    item.upload(); 
 
}
<md-button class="md-blue" ng-click="$ctrl.someFxn(item)" ng-disabled="item.isReady || item.isUploading || item.isSuccess"> 
 
Upload 
 
</md-button>