javascript - 使用 AngularJs 显示图像预览并上传文件-6ren

javascript - 使用 AngularJs 显示图像预览并上传文件

转载作者：行者123 更新时间：2023-12-02 16:14:26

26

4

我想使用 AngularJs 上传带有 HTML5 输入类型="file"的文件/图像，并且当用户上传图像时显示预览。所以我以这种方式创建了我的自定义指令:

var modulo = angular.module('myApp', []);

modulo.directive('fileModel', function () {
    return {
        restrict: 'AEC',
        link: function(scope, element, attrs) {
            element.bind('change', function (event) {
                //Take the object
                var fetchFile = event.target.files[0];
                //emit the object upward
                scope.$emit('fileSelected', fetchFile);
            });            
        }
    };
});

现在，当我获取对象(文件/图像)时，我会显示我的 Controller ，并且使用此 Controller 我想显示预览。

modulo.controller('myController', function ($scope, $http) {

    var files;

    $scope.$on('fileSelected', function(event, fetchFile) {
        //Receive the object from another scope with emit
        files = fetchFile;
        var reader = new FileReader();

        reader.onloadend = function () {
            //Put the object/image in page html with scope
            $scope.content = reader.fetchFile;
        }; 
    });
});

最后，我显示了我想要在输入文件中显示预览的 html 页面。

<html ng-app="myApp">
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/libs/angular.js/angular.js"></script>
        <script src="script.js"></script>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    </head>
    <body ng-controller="myController">

        <h1>Select file</h1>
        <input type="file" file-model/>
        <img ng-src="{{content}}"/>
        <div>
            <button ng-click="send()">
                send
            </button>
        </div>
    </body>
</html>

通过这种方式，我也无法获得预览，在此代码片段中也没有我将要做的使用 Json 发送图像的功能。我该如何解决这个问题？谢谢!

最佳答案

您必须将读取的文件数据转换为 Base 64 字符串格式。然后您可以使用该 Base 64 数据来显示图像。

<img src='data:image/jpeg;base64,<!-- base64 data -->' />

您可以轻松地将这个 Base 64 数据传输到服务器，因为它只是一个字符串。

关于javascript - 使用 AngularJs 显示图像预览并上传文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29830511/

26

4

0

文章推荐： javascript - 检查元素是否具有给定数组中的任何属性

文章推荐： javascript - 如何在 Table 内的按钮元素上定义新的 ajax 函数

文章推荐： javascript - startTimer() 中的两个 if 语句

javascript - 正则表达式/[a-zA-Z0-9_-]/传 `!!!`时返回true
我有以下正则表达式 /[a-zA-Z0-9_-]/ 当字符串只包含从 a 到z 大小写、数字、_ 和 -。我的代码有什么问题？能否请您向我提供一个简短的解释和有关如何修复它的代码示例？ //var

首页

博学

6Ren·AI

商城

javascript - 使用 AngularJs 显示图像预览并上传文件