javascript 在 Angular JS 中上传后显示图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19986178/
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
Displaying an Image after uploading in Angular JS?
提问by user1871869
I have a question. So I found that you can upload an image in HTML and I used the following code:
我有个问题。所以我发现你可以用 HTML 上传图片，我使用了以下代码：
<form name="imageUpload" method="post">
<input type="file" multiple accept = image/* name="uploadField"/>
</form>
However, in light of using AngularJS, I was wondering if there was a way to, upon uploading the image, display the image in another location on the screen. If someone can point me in the right direciton, tha would be great! Thanks!
但是，鉴于使用 AngularJS，我想知道是否有办法在上传图像时在屏幕上的另一个位置显示图像。如果有人能指出我正确的方向，那就太好了！谢谢！
回答by pawel
It's more the javascript issue. As was answered here this answer. In angular it should look like this:
更多的是javascript问题。正如这里回答这个答案。在角度上它应该是这样的：
<!doctype html>
<html lang="en">
<head >
<meta charset="UTF-8">
<title>Upload Image</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
angular.module('myApp', []).
controller('UploadCtrl', ['$scope', function (scope) {
scope.image = "";
}]).
directive('myUpload', [function () {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
var reader = new FileReader();
reader.onload = function (e) {
scope.image = e.target.result;
scope.$apply();
}
elem.on('change', function() {
reader.readAsDataURL(elem[0].files[0]);
});
}
};
}]);
</script>
</head>
<body ng-app="myApp">
<div ng-controller="UploadCtrl">
<img ng-if="image" src="{{image}}" alt="">
<form action="">
<input my-upload type="file" name="upload">
</form>
</div>
</body>
</html>
回答by Rob
You could do something like I through together: Plunker
你可以像我一样一起做：Plunker
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css@*" data-semver="3.0.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
<script data-require="[email protected]" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body ng-controller="MainCtrl" >
<canvas image-display file-data="{{data}},{{mimeType}},{{fileName}}"></canvas>
</body>
</html>
