Question

我正在上传图片，在一个td中我也放了图像名称。但我的问题是，当我上传图像时，图像名称会在所有不应该重复的行中重复出现。这有什么问题？谢谢。

这是我的小提琴链接：http://jsfiddle.net/DharkRoses/g31ykfy8/

示例代码：

$scope.fileReaderSupported = window.FileReader != null;
$scope.photoChanged = function (files, index) {
    if (files != null) {
        var file = files[0];
        var index = this.$index;
       $scope.imgName = files[0].name;
        if ($scope.fileReaderSupported && file.type.indexOf('image') > -1) {
            $timeout(function () {
                var fileReader = new FileReader();
                fileReader.readAsDataURL(file);
                fileReader.onload = function (e) {
                    $timeout(function () {
                        $scope.thumbnail[index] = {dataUrl: e.target.result};
                    });
                }
            });
        }
    }
};

Answer 1

您需要为文件名创建相同大小的数组，并根据在photoChanged事件中推送文件名所需的索引。

以下是相同的工作代码。

angular.module('test', []);
angular.module('test').controller('UploadCtrl', function ($scope, $timeout,$parse) {
     $scope.imgName ='';
    $scope.thumbnail = {
        dataUrl: []
    };
        $scope.fileNames = [,,,,];
    $scope.fileReaderSupported = window.FileReader != null;
    $scope.photoChanged = function (files, index) {
        if (files != null) {
            var index = this.$index;
          var file = files[0];           
          $scope.fileNames[index] = files[0].name;
          $scope.$apply();
            if ($scope.fileReaderSupported && file.type.indexOf('image') > -1) {
                $timeout(function () {
                    var fileReader = new FileReader();
                    fileReader.readAsDataURL(file);
                    fileReader.onload = function (e) {
                        $timeout(function () {
                            $scope.thumbnail[index] = {dataUrl: e.target.result};
                        });
                    }
                });
            }
        }
    };
});

标记看起来如下所示。

<div ng-app="test">
    <div ng-controller="UploadCtrl">
        <table>
            <tr ng-repeat="i in [1, 2, 3, 4]">
                <td>{{i}}</td>
                <td>
                    <input type="file" name="file" onchange="angular.element(this).scope().photoChanged(this.files)" />
                    <img ng-src="{{ thumbnail[$index].dataUrl }}" height="50px" />
                </td>
              <td>
                {{fileNames[$index]}}                
              </td>
            </tr>
        </table>
    </div>
</div>

可以找到工作小提琴here。

如何在angularjs中显示上传图像的图像名称

1 个答案: