3

質問があります。そのため、HTML で画像をアップロードできることがわかり、次のコードを使用しました。

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

ただし、AngularJS を使用することを考慮して、画像をアップロードするときに、画面上の別の場所に画像を表示する方法があるかどうか疑問に思っていました。誰かが私を正しい方向に向けることができれば、それは素晴らしいことです! ありがとう！

4

2 に答える 2

8

それはもっと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>
于 2013-11-15T15:12:08.970 に答える