admin管理员组

文章数量:1291594

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!

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!

  • javascript
  • angularjs
  • file-upload
Share Improve this question edited Nov 14, 2013 at 19:07 Marcin Orlowski 75.6k11 gold badges128 silver badges152 bronze badges asked Nov 14, 2013 at 19:05 user1871869user1871869 3,36715 gold badges60 silver badges108 bronze badges 1
  • I just did exactly this in Angular, following the answer to my similar question. I'll share my code if it helps. – Dave Everitt Commented Jan 9, 2014 at 17:28
Add a ment  | 

2 Answers 2

Reset to default 7

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>

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./bootstrap/3.0.2/css/bootstrap.min.css" />
    <script data-require="[email protected]" data-semver="1.2.0" src="http://code.angularjs/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>

本文标签： javascriptDisplaying an Image after uploading in Angular JSStack Overflow

版权声明：本文标题：javascript - Displaying an Image after uploading in Angular JS? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741538515a2384175.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。