javascript - 在 Angular JS 中上传后显示图像?

标签 javascript angularjs file-upload

我有一个问题。所以我发现你可以用 HTML 上传图片,我使用了以下代码:

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

但是,鉴于使用 AngularJS,我想知道是否有一种方法可以在上传图像后在屏幕上的另一个位置显示图像。如果有人能指出我正确的方向,那就太好了!谢谢!

最佳答案

更多的是 javascript 问题。正如这里的回答this answer .在 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>

关于javascript - 在 Angular JS 中上传后显示图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19986178/

相关文章:

php - 为在另一个网页中加载的网页添加后退按钮

angularjs - 如何在 Visual Studio Code 中为自定义 angularjs 模块添加智能感知?

javascript - 在断开的链接检查器 AngularJS 中找不到图像源

iis - 上传时无法打开网站上的其他页面?

javascript - 有条件的 Angular ui 路由器 View

javascript - javascript中一个按钮样式中的两种字体类型

javascript - Iframe 内容未加载到 JQuery 对话框中

AngularJS/CORS OPTIONS 请求和性能

javascript - 如何判断上传的文件是否已经完全上传?

Python文件上传 "KeyError"