在Angular JS上传后显示图像？ [英] Displaying an Image after uploading in Angular JS?
本文介绍了在Angular JS上传后显示图像？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< form name =imageUpload方法= POST >
< input type =filemultiple accept = image / * name =uploadField/>
< / form>
然而，根据使用AngularJS，我想知道是否有办法，上传图像，在屏幕上的另一个位置显示图像。如果有人能把我指向正确的方向，那会很棒！谢谢！
解决方案
这是更多的JavaScript问题。正如在这里回答这个答案。在角度它应该看起来像这样：
<！doctype html>
< html lang =en>
< head>
< meta charset =UTF-8>
< title>上传图片< /标题>
< script type =text / javascriptsrc =angular.min.js>< / script>
< script type =text / javascript>
angular.module（'myApp'，[]）。
controller（'UploadCtrl'，['$ scope'，function（scope）{
scope.image =;
}]）。
$ b指令（'myUpload'，[function（）{
return {
restrict：'A'，
link：function（scope，elem，attrs）{
var reader = new FileReader（）;
reader.onload = function（e）{
scope.image = e.target.result; $ b $ scope。$ apply（）;
$ b elem.on（'change'，function（）{
reader.readAsDataURL（elem [0] .files [0]）;
}） ;
}
};
}]）;
< / script>
< / head>
< body ng-app =myApp>
< div ng-controller =UploadCtrl>
< img ng-if =imagesrc ={{image}}alt =>
< form action =>
<输入my-upload type =filename =upload>
< / form>
< / div>
< / body>
< / html>
I have a question. So I found that you can upload an image in HTML and I used the following code:
<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!
解决方案
It's more the javascript issue. As was answered here this answer. In angular it should look like this:
<!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>
这篇关于在Angular JS上传后显示图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
