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

Question

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

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)" />

之前我是边走边上传文件，当我 select 文件时它会直接发送到服务器，但现在我 select 时需要在我的表单中显示它，但是稍后上传，我在网络上看到的都是使用指令，但是如果不使用指令怎么组织呢？

Answer 1

我读了这个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 函数中的等效字节创建。

希望对你也有帮助。

Answer 2

你能不能在你的控制器中试试这个来传递你的文件对象：

$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

希望对您有所帮助

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

AngularJS image upload preview without directive

javascript

image

angularjs