множественный экземпляр файла типа ввода загружает одно и то же изображение - PullRequest
Новая
       26

множественный экземпляр файла типа ввода загружает одно и то же изображение

0 голосов
/ 30 мая 2018

У меня есть таблица, и для каждой строки необходимо загрузить изображение / фотографию для нее.В столбце фотографий может быть несколько изображений для одной строки.

В этом и заключается проблема: всякий раз, когда я нажимаю кнопку обзора для 1-й или любой строки, изображения загружаются и для всех остальных строк.Я приложил скриншот этого.

enter image description here

Код для html-части приведен ниже: 

<table style="width:50%" border="1">
        <tr>
            <th align="center">First</th>
            <th align="center">Last</th>
            <th align="center">Age</th>
            <th align="center">photo</th>
        </tr>
        <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
            <td >
                <input type="file" multiple file-upload /> 
            </td>
            <td align="right">
                <div ng-repeat="step in files">
                    <img ng-src="{{step.src}}" class="thumbnail" height="50px" />
                </div>
            </td>
        </tr>

    <tr>
            <td>aa</td>
            <td>aa</td>
            <td>50</td>
            <td >
                <input type="file" multiple file-upload /> 
            </td>
            <td align="right">
                <div ng-repeat="step in files">
                    <img ng-src="{{step.src}}" class="thumbnail" height="50px" />
                </div>
            </td>
        </tr>

        <tr>
            <td>bb</td>
            <td>bb</td>
            <td>50</td>
            <td >
                <input type="file" multiple file-upload /> 
            </td>
            <td align="right">
                <div ng-repeat="step in files">
                    <img ng-src="{{step.src}}" class="thumbnail" height="50px" />
                </div>
            </td>
        </tr>

    <tr>
            <td>cc</td>
            <td>cc</td>
            <td>50</td>
            <td >
                <input type="file" multiple file-upload /> 
            </td>
            <td align="right">
                <div ng-repeat="step in files">
                    <img ng-src="{{step.src}}" class="thumbnail" height="50px" />
                </div>
            </td>
        </tr>
</table>

Справочник по добавлению динамических изображенийтаблица взята по этой ссылке добавление динамического изображения в столбец таблицы не работает в angularjs

Код для angularjs приведен ниже: 

$scope.files = [];
    $scope.$on("fileSelected", function (event, args) {
        var r = "d";
        var item = args;
        $scope.files.push(item);
        var reader = new FileReader();

        reader.addEventListener("load", function () {
            $scope.$apply(function () {
                item.src = reader.result;
            });
        }, false);

        if (item.file) {
            reader.readAsDataURL(item.file);
        }
    });

    $scope.path = '';
    $scope.path2 = '';

    $scope.imageUpload = function (event) {
        console.log(event)
        var files = event.target.files;
        var reader = new FileReader();
        reader.onload = $scope.imageIsLoaded;

        for (var i = 0; i < files.length; i++) {
            reader.readAsDataURL(files[i]);
        }
    }

abapp.directive('fileUpload', function () {
    return {
        scope: true, //create a new scope
        link: function (scope, el, attrs) {
            el.bind('change', function (event) {
                var files = event.target.files;
                //iterate files since 'multiple' may be specified on the element
                for (var i = 0; i < files.length; i++) {
                    //emit event upward
                    scope.$emit("fileSelected", {
                        file: files[i]
                    });
                }
            });
        }
    };

1 Ответ

0 голосов
/ 30 мая 2018

Для вашего $scope объекта вам нужно иметь (вместо файловой переменной) что-то вроде этого: 

$scope.users = [
    {
        name: "John",
        lastname: "smith",
        age: 11,
        files: [ //this is array of files for this user ]
    }, { 
        name: " Another guy"
        ...
        files: [//this is array of files for another guy]
    }
]

И затем циклически переключать пользователей (для каждого -> одного пользователя).

...