Question

目前正在学习AngularJS，我想用它来上传和显示图像，作为记录项目摘要的一种方式。我找到了Angular File Upload，但我不太确定如何在我的程序中实现它。

基本上我到目前为止是一个生成表单的按钮，单击提交会将这些字段添加到按钮单击时生成的显示。文本/数字字段显示正常，但显然附加/上传图像需要更多工作。

我正在使用C9开发环境，所以我不太确定如何使我的工作区可公开查看，但我在JSFiddle上粘贴了主要代码段（它没有完全正常工作，但至少你可以查看JS代码）： https://jsfiddle.net/edmond_wu/63v98qt6/9/

var app = angular.module('myApp', []);
app.controller('ctrl', function($scope) {
    $scope.global_savings = 0;
    $scope.items = [];
    $scope.itemsToAdd = [];
    $scope.addReport = function(item) {
        var index = $scope.itemsToAdd.indexOf(item);
        $scope.global_savings += Number(item.savings);
        if ($scope.global_savings >= 100000) {
            alert("Your benchmark of $100,000 has been reached!");
        }
        $scope.itemsToAdd.splice(index, 1);
        $scope.items.push(angular.copy(item));
    }
    $scope.addNew = function() {
        $scope.itemsToAdd.push({
            title: '',
            manager: '',
            savings: '',
            summary: '',
            result: '',
            image: ''
    });
}

HTML就是这样的，底部有一个Submit按钮（提交按钮应该将图像与其余的表单数据一起上传）：

<input type="file" class="button" ng-model="itemToAdd.image" accept="image/*">

<input type="submit" class="button" ng-click="addReport(itemToAdd)">

Answer 1

我认为您不能在Times的输入上使用ng-model。

我设法使用来自here的自定义指令工作：

type="file"

然后将输入更改为：

app.directive("fileread", [function () {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                var reader = new FileReader();
                reader.onload = function (loadEvent) {
                    scope.$apply(function () {
                        scope.fileread = loadEvent.target.result;
                    });
                }
                reader.readAsDataURL(changeEvent.target.files[0]);
            });
        }
    }
}]);

您所要做的就是将指令添加到当前的角度代码中并更改html中的一行，就是这样。

jsfidlle：https://jsfiddle.net/63v98qt6/10/

以上内容会创建一个directive <input type="file" class="button" fileread="itemToAdd.image" accept="image/*">，将图片绑定到范围内对象的fileread。

使用AngularJS在表单中附加/显示图像

1 个答案: