Question

我有一个图片上传验证我的控制器中的图像，然后让用户单击添加图像，如果用户然后上传新图像并将图像添加到阵列以显示吉祥的图像和新形象。

目前，如果我上传新图片，它将更改数组中的图片。

有一种简单的方法可以改变我的代码来解决这个问题吗？

综述

所以只是为了澄清，当我点击favicon.ico我希望将当前图像添加到数组时，当我上传新图像并添加图像时，我希望将新图像添加到数组并保留原始图像

目前如果我添加新图像，它将对数组进行权限。

请参阅Fiddle

HTML

Add Image

的JavaScript

 <div ng-controller="UpLoadImage">

    <img style="height: 100px; width: 100px" ng-src="{{preview}}" alt="preview image">
    <label for="file">Select File</label>
    <input ng-model="file" type='file' ng-model-instant name='file' id='fileinput'
           accept='image/*' onchange='angular.element(this).scope().first(this)'/>

    {{uploadError}}

    <button ng-click="addImage()">Add image</button>
    <div ng-repeat="creative in creative">
        <img style="height: 100px; width: 100px" ng-src="{{preview}}" alt="preview image">
    </div>


</div>

Answer 1

最后我用不同的方式写了

<强> HTML

<div ng-controller="UpLoadImage">

<img style="height: 100px; width: 100px" ng-src="{{preview}}" alt="preview image">
<label for="file">Select File</label>
<input ng-model="file" type='file' ng-model-instant name='file' id='fileinput'
       accept='image/*' onchange='angular.element(this).scope().first(this)'/>

{{uploadError}}

<button ng-click="addImage()">Add image</button>
<div ng-repeat="slot in slots">
    <img style="height: 100px; width: 100px" ng-src="{{slot.image}}" alt="preview image">
</div>

<强>的JavaScript

angular.module('myApp', [])

.controller('UpLoadImage', function ($scope, $http, $timeout) {


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

    $scope.first =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){
                        console.log(e.target.result);
                        $scope.preview = e.target.result;
                        window.alert("perfect");
                        $scope.$apply();

                    }else{
                        window.alert("incorrect definitions");
                        console.log(width,height);
                        $scope.$apply();
                    }
                };
                img.src = fr.result;
            };

            fr.readAsDataURL(file);
        }else{
            window.alert("to big");
            console.log('file size to big')

        }
    };

    $scope.foo = "base64 image here";


    $scope.addImage = function () {
        if($scope.slots.length < $scope.maxSlots){
            $scope.slots.push({"image":$scope.preview});

        }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')
        }
    };
});

AngularJS：将base64图像添加到数组

1 个答案: