在列表中上传之前预览图像使用 ng-repeatAngularjs

问题描述

我想在列表中上传 img。图像文件将保存到本地存储并将名称保存到数据库。我成功地完成了问题发生在 img I preview 部分。到下一行时只在第一行预览img（注意：img上传成功）。

Here is the Screenshot Of UI

HTML：

<tbody ng-repeat="inv_InternalOrderDetail in inv_InternalOrderDetailList ">
                               
  <tr>
    
      <td class="t-cell-center"><label><i ng-show="!inv_InternalOrderDetail.displaySta" ng-click="itemIdGet(inv_InternalOrderDetail)" class="fa fa-plus-square"></i><i ng-show="inv_InternalOrderDetail.displaySta" class="fa fa-minus-square"></i><input style="visibility:hidden;" type="checkBox" ng-model="inv_InternalOrderDetail.displaySta" /></label></td>
      <td class="t-cell-center">{{$index+1}}</td>
     
      <div class="row">
        <div class="col-md-6">
            <div style="color: red">{{Message}}</div>
            <div class="input-group">
                <label class="input-group-btn">
                    <span style="background-color: #f69c55; border-color: #F69C6E;">
                        browse …
                      
                        <input type="file" id="imageUpload" select-ng-files accept=".doc,.docx,application/msword,application/pdf,image/*" class="form-control" ng-model="inv_InternalOrderDetail.ArtWork" onchange="readURL(this,'imgFram'); angular.element(this).scope().SelectFile(this.files)" multiple>

                    </span>
                </label>

            </div>
            <div class="row">

                <div class="col-md-6">
                    <div class="form-group">

                        <input class="customBtn custmoBtnSave ng-binding" type="submit" ng-click="FileUpload()" value="Upload File" />
                    </div>
                </div>
               
            </div>

        </div>
        <div class="col-md-6">
            <div style="width:100%;height:100%;" id="ImageId2" >
                <img  id="imgFram" style="border-radius: 5px 5px 5px 5px ;" width="200" height="155" class=" ng-pristine ng-untouched ng-valid ng-empty">
            </div>
        </div>
    </div>
  </tr>
</tbody>

控制器：

$scope.FileUpload = function () {
        FileUploadService.UploadFile($scope.SelectedFileForUpload).then(function (d) {
            alert("upload successfull!!!");
            console.log(d);
          
        },function (e) {
            alert(e);
        });
    }

$scope.SelectFile = function (file) {

        $scope.SelectedFileForUpload = file[0];
        console.log(' $scope.SelectedFileForUpload ',$scope.SelectedFileForUpload);

        $scope.ImageFile = file[0];


    }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）