输入类型文件的多个实例加载相同的图像

Question

我有一张桌子，每行都需要上传图片/照片。照片列单行可以有多张图片。

这是问题所在，每当我点击第一行或任何行的浏览按钮时，所有其他行的图像也会上传。我附上了它的截图。

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>

将动态图像添加到表格的参考取自此链接 adding dynamic image to table column does not work in 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]
                    });
                }
            });
        }
    };

Answer 1

在您的 $scope 对象上，您需要（而不是 files 变量）这样的东西：

$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]
    }
]

然后，循环遍历用户（对于每个 -> 一个用户）。