Question

更新 - 由于对JS中的小错误发表评论

我有一个简单的上传程序

上传图片
将图像添加到数组
从阵列中删除图像的选项
如果对数组保存感到满意，请发布到API端点

用户将看到一个填充了图像的数组，然后他们就可以删除这些图像并将新图像添加到数组中，如果他们感到满意则继续将数组保存到API端点。

问题

当我将图像添加到数组预览时，我没有看到它们预览。

我的HTML

    <div class="dynamic-upload-container">
        <div class="preview"><img style="height: 100px; width: 100px" ng-src="{{preview}}" alt="preview image"></div>
        <div class="upload-new">
            <input id="fileinput" ng-model="file" type="file" ng-model-instant="" name="file" accept="image/*" onchange="angular.element(this).scope().uploadImage(this)"> {{uploadError}}
            <button ng-click="addImage()">Add image</button>
        </div>
        <div class="slots-container">
            there is a campaign {{campaign.c_name}}
            this is the max slots {{campaign.max_slots}}
            this are the slots {{campaign.slots}}
            <!--<div ng-repeat="slot in campaign.slots" class="slot"><img ng-src="{{slot.base_image}}" alt="slot image">-->

                <div ng-repeat="slot in campaign.slots"><img ng-click="addImage()" style="height: 100px; width: 100px" ng-src="{{slot.base_image}}" alt="preview image">
                <div>this is a slot</div>
                <button ng-click="removeImage(slot)">Remove Image</button>
            </div>
             <button ng-click="SaveImage()">Save</button>
        </div>
    </div>

的JavaScript

.controller（＆＃39;仪表板＆＃39;，功能（$ scope，$ http，$ timeout）{

$scope.campaigns =[];
$scope.preview = 'img/download.png';
$scope.slots = [];
$scope.maxSlots = 5; // this dynamic

$scope.uploadImage = function () {
    // console.log('we are here');
    input = document.getElementById('fileinput');
    file = input.files[0];
    size = file.size;
    if (size < 650000) {
        var fr = new FileReader;
        fr.onload = function (e) {
            var img = new Image;

            img.onload = function () {
                var width = img.width;
                var height = img.height;
                if (width == 1920 && height == 1080) {
                    $scope.preview = e.target.result;
                    $scope.perfect = "you added a image";
                    $scope.$apply();

                } else {
                    $scope.notPerfect = "incorrect definitions";
                    $scope.$apply();
                }
            };
            img.src = fr.result;
        };

        fr.readAsDataURL(file);
    } else {
        $scope.notPerfect = "to big";
    }
};

$scope.addImage = function () {
    if ($scope.slots.length < $scope.maxSlots) {
        $scope.slots.push({
            "slot_id": $scope.slots.length + 1,
            "base_image": $scope.preview,
            "path_image": ""
        });

    } else {
        window.alert("you have to delete a slot to generate a new one");
        // console.log('you have to delete a slot to generate a new one')
    }
};

$scope.SaveImage = function () {
    $http({
        url: "http://www.site.co.uk/ccuploader/campaigns/updateSlots",
        method: "POST",
        data: { 'campaign': "ben", 'slots': $scope.slots },
        headers: {'Content-Type': 'application/json'}
    }).then(function (response) {
        // success
        console.log('success');
        console.log("then : " + JSON.stringify(response));
        location.href = '/cms/index.html';
    }, function (response) { // optional
        // failed
        console.log('failed');
        console.log(JSON.stringify(response));
    });
};

$scope.removeImage = function(s) {
    $scope.slots.splice($scope.slots.indexOf(s), 1);
};

$scope.GetData = function () {
    $http({
        url: "http://www.site.co.uk/ccuploader/campaigns/getCampaign",
        method: "POST",
        date: {},
        headers: {'Content-Type': 'application/json'}
    }).then(function (response) {
        // success
        console.log('you have received the data ');
        console.log(response);


        $scope.campaigns = response.data;
        //$scope.slots = data.data[0].slots;

    }, function (response) {
        // failed
        console.log(response);
    });
};

$scope.GetData();

}）

将图像添加到数组角度

0 个答案: