Question

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

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>

上传任何文本文件并仅使用HTML5和AngularJS进行预览

1 个答案: