没有指令的AngularJS图像上传预览

时间:2015-01-05 08:29:29

标签: javascript angularjs image

我正在通过服务上传文件:

var addFile = function(files) {
  var deferred = $q.defer();
  var fd = new FormData();
  fd.append("file", files[0]);
  $http.post("/files", fd, {
      ***
    })
    .success(function(data, status, headers, config) {
      ***
    })
    .error(function(err, status) {
      ***
    });
    ***
};

在控制器中我有类似的东西:

uplService.addFile($scope.files).then(function(url) {
  $scope.news.Photo = url;
});

并在HTML视图中:

<input type="file" name="file" onchange="angular.element(this).scope().photoChanged(this.files)" />

之前我在移动时上传文件,当我选择文件时它直接进入服务器,但现在我需要在我选择它时以我的形式显示它,但是稍后上传,我在网上看到的只是使用指令,但如何在不使用指令的情况下组织它?

2 个答案:

答案 0 :(得分:10)

您可以在控制器中尝试将此文件对象传递到此处:

$scope.fileReaderSupported = window.FileReader != null;
$scope.photoChanged = function(files){
    if (files != null) {
        var file = files[0];
    if ($scope.fileReaderSupported && file.type.indexOf('image') > -1) {
        $timeout(function() {
            var fileReader = new FileReader();
            fileReader.readAsDataURL(file);
            fileReader.onload = function(e) {
                $timeout(function(){
                    $scope.thumbnail.dataUrl = e.target.result;
                });
            }
        });
    }
}
};

并在视图上

<img ng-show="thumbnail.dataUrl != null" ng-src="{{ thumbnail.dataUrl }}" class="thumb">

demo here

希望这个帮助

答案 1 :(得分:7)

我读了这篇article,这有助于我解决上传图片的问题。

如果要显示所选文件,请尝试以下操作:

<img data-ng-src="data:image/png;base64,{{news.Photo}}" id="photo-id"/>

解释

Model / ViewModel / Class中的图像属性必须是字节数组,如

public byte[] Photo { get; set; }

数据:image / jpeg; base64定义来自news.Photo的字节数组,因此可以在客户端浏览器上正确呈现。

你的案例中的$scope.news.Photo只是一个范围变量,它包含绘制的图像,其中的字节是由文章中$ scope.uploadFile函数中的等效字节创建的。

我希望它对你也有帮助。