我正在通过服务上传文件:
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)" />
之前我在移动时上传文件,当我选择文件时它直接进入服务器,但现在我需要在我选择它时以我的形式显示它,但是稍后上传,我在网上看到的只是使用指令,但如何在不使用指令的情况下组织它?
答案 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">
希望这个帮助
答案 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函数中的等效字节创建的。
我希望它对你也有帮助。