logo标签列表

在Angular JS中上传后显示图像？

javascriptangularjsfile-upload
3

我有一个问题。我发现在HTML中可以上传图片，我使用了以下代码：

<form name="imageUpload" method="post">
    <input type="file" multiple accept = image/* name="uploadField"/>
</form>

然而，考虑到使用AngularJS，我想知道是否有一种方法，在上传图片后，在屏幕上的另一个位置显示该图片。如果有人能指点我正确的方向，那就太好了！谢谢！

我刚才在Angular中按照类似问题的答案做了完全相同的事情。如果有帮助，我可以分享我的代码。 - Dave Everitt
2个回答
8

这更多是关于JavaScript的问题。就像在这个答案中所回答的那样。在Angular中，它应该是这样的：

    <!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>
-1
你可以像我一样做一些事情：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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接