任意のtxtファイルをアップロードし、html5と角度jだけを使用してプレビュー

Question

どのように.txt、jpeg、gifなどのタイプのドキュメントをアップロードし、htmlページでプレビューを取得するか.html5とangularjs.Onlyを使用して、ロケーション。

Answer 1

use the FileReader APIファイル内のデータを読み取ることができます。

この例では、上記のリンクされた回答を修正し、ファイルタイプが画像であるかどうかをチェックし、そのように表示します。それ以外の場合は、ファイルのデータをテキストとして表示します。あなたがこれまでに試してみました何

angular.module('fileLoad', []).directive('fileSelect', ['$window', function($window) { 
 
    return { 
 
    restrict: 'A', 
 
    require: 'ngModel', 
 
    link: function($scope, el, attr, ctrl) { 
 
     var fileReader = new $window.FileReader(); 
 
     var fileType; 
 
     fileReader.onload = function() { 
 
     var fileData = {}; 
 
     fileData.type = fileType; 
 
     fileData.data = fileReader.result; 
 

 
     ctrl.$setViewValue(fileData); 
 
     $scope.$apply(); 
 
     }; 
 

 
     el.bind('change', function(e) { 
 
     var fileName = e.target.files[0]; 
 
     fileType = (fileName && fileName.type) || ''; 
 
     if (fileType.indexOf('image') != -1) { 
 
      fileReader.readAsDataURL(fileName); 
 
     } else if(fileName) { 
 
      fileReader.readAsText(fileName); 
 
     } else { 
 
      ctrl.$setViewValue({}); 
 
      $scope.$apply(); 
 
     } 
 
     }); 
 
    } 
 
    }; 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="fileLoad"> 
 
    <input type="file" ng-model="file.data" file-select> 
 
    <img ng-show="file.data.type && file.data.type.indexOf('image') != -1" data-ng-src="{{file.data.data}}" /> 
 
    <p ng-show="file.data.type && file.data.type.indexOf('image') == -1" ng-bind="file.data.data"></p> 
 
</div>