仅使用 HTML5 和 AngularJS 上传任何文本文件和预览答案

【问题标题】：Upload any text file and preview using only HTML5 and AngularJS仅使用 HTML5 和 AngularJS 上传任何文本文件和预览
【发布时间】：2018-02-09 00:30:09
【问题描述】：

如何上传 .txt、jpeg 或 gif 等任何类型的文档并在 html 页面中预览？仅通过使用 HTML5 和 AngularJS。无需在任何位置保存文档。

【问题讨论】：

到目前为止你尝试过什么？最好展示一下您一直在处理的代码。

标签： html angularjs

【解决方案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>

【讨论】：

它是 HTML 和 java 脚本。但我需要 Angular Js。请尽快帮助我