Displaying an Image after uploading in Angular JS?

2019-05-11 00:32发布

站内问答 / JavaScript
1050 2 2

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!

2条回答
老娘就宠你
2楼-- · 2019-05-11 00:58

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>
查看更多
0人赞 添加讨论(0) 举报
欢心
3楼-- · 2019-05-11 01:02

You could do something like I through together: 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="angular.js@1.2.0" 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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(2)