javascript 没有指令的AngularJS图像上传预览
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27775784/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS image upload preview without directive
提问by brabertaser19
I'm uploading files via service:
我正在通过服务上传文件：
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) {
***
});
***
};
and in controller I have something like:
在控制器中，我有类似的东西：
uplService.addFile($scope.files).then(function(url) {
$scope.news.Photo = url;
});
and in HTML view:
并在 HTML 视图中：
<input type="file" name="file" onchange="angular.element(this).scope().photoChanged(this.files)" />
before that I uploaded file on-the-go, when I select file it goes directly to server, but now I need to display it in my form when I select it, but upload later, all I see in web is using directives, but how could I organize it without using directives?
在此之前，我在旅途中上传文件，当我选择文件时，它会直接发送到服务器，但现在我需要在选择它时将其显示在我的表单中，但稍后上传，我在网络中看到的只是使用指令，但是如何在不使用指令的情况下组织它？
回答by murnax
Can you try this in your controller to pass your file object here:
你能在你的控制器中试试这个来传递你的文件对象吗：
$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;
});
}
});
}
}
};
and on the view
并在视图上
<img ng-show="thumbnail.dataUrl != null" ng-src="{{ thumbnail.dataUrl }}" class="thumb">
Hope this help
希望这有帮助
回答by arman1991
I read this article, which helped me to solve the problem about uploading the image.
我读了这篇文章，它帮助我解决了上传图片的问题。
If you want to show your selected file, try this:
如果你想显示你选择的文件，试试这个：
<img data-ng-src="data:image/png;base64,{{news.Photo}}" id="photo-id"/>
Explanation:
说明：
Your property for image in Model/ViewModel/Class must be an array of bytes, like
您在 Model/ViewModel/Class 中的图像属性必须是一个字节数组，例如
public byte[] Photo { get; set; }
The data:image/jpeg;base64 defines the byte array from news.Photoso it can be rendered correctly on the clients browser.
data:image/jpeg;base64 定义了来自的字节数组，news.Photo因此它可以在客户端浏览器上正确呈现。
The $scope.news.Photoin your case is just an scoped variable which contains the drawed image with byte created by the byte equivalent in the $scope.uploadFile function from article.
在$scope.news.Photo你的情况就是包含由字节相当于从文章的$ scope.uploadFile函数创建的字节drawed图像的范围的变量。
I hope it will be also helpful for you.
我希望它也能对你有所帮助。
