使用angular-file-upload读取文件内容

时间:2017-04-02 12:18:54

标签: angularjs angular-file-upload

我在angularjs项目中使用angular-file-upload模块进行文件上传。我想使用FileUploader读取文件内容并在textarea中显示。

请建议我如何实现这个目标

提前致谢

控制器

'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>

我想在$ scope.filecontent变量

中获取文件内容

1 个答案:

答案 0 :(得分:0)

回调由于某种原因无法正常工作,所以反而一次上传&#39;单击我在我的控制器中运行了一个功能,记录了文件内容,然后运行了item.upload()函数..我在下面附上了一个基本示例。

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