javascript - 输入类型文件更改时如何传递 Angular 值

选择新图像进行审核时，我想创建缩略图。 ng-change不适用于angular中的输入类型文件，请改用onchange。

<div ng-repeat="images in listImages">
<img id="imageId{{$index}}" ng-src="images.fileLocation">
<input type="file" onchange="angular.element(this).scope().imagePreview(this, imageId{{$index}})" accept="image/*" />
</div>

  $scope.imagePreview = function(fileInput, imageId) {
    if (fileInput.files && fileInput.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#' + imageId).attr('src', e.target.result);
        }
        reader.readAsDataURL(fileInput.files[0]);
    }
  }

使用上面的代码，出现错误。无法读取imageId {{$ index}}。
有什么方法可以将带有索引的imageId传递给imagePreview方法？

最佳答案

如果我没有误解，为什么不使用“ ng-file-upload”指令上传文件，它提供了预览，裁剪等更多功能。

看一看 ：

ng-file-upload

或尝试使用此代码上传带有预览的图片
Js fiddle for image upload

 <form name="myForm">
<fieldset>
  <legend>Upload on form submit</legend>
  <br>Photo:
  <input type="file" ngf-select ng-model="picFile" name="file"
         accept="image/*" ngf-max-size="2MB" required
         ngf-model-invalid="errorFiles">
  <i ng-show="myForm.file.$error.required">*required</i><br>
  <i ng-show="myForm.file.$error.maxSize">File too large
      {{errorFiles[0].size / 1000000|number:1}}MB: max 2M</i>
  <img ng-show="myForm.file.$valid" ngf-thumbnail="picFile" class="thumb"> <button ng-click="picFile = null" ng-show="picFile">Remove</button>
  <br>
  <button ng-disabled="!myForm.$valid"
          ng-click="uploadPic(picFile)">Submit</button>
  <span class="progress" ng-show="picFile.progress >= 0">
    <div style="width:{{picFile.progress}}%"
        ng-bind="picFile.progress + '%'"></div>
  </span>
  <span ng-show="picFile.result">Upload Successful</span>
  <span class="err" ng-show="errorMsg">{{errorMsg}}</span>
</fieldset>
<br>

var app = angular.module('fileUpload', ['ngFileUpload']);

 app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
$scope.uploadPic = function(file) {
file.upload = Upload.upload({
  url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
  data: {file: file, username: $scope.username},
});

file.upload.then(function (response) {
  $timeout(function () {
    file.result = response.data;
  });
}, function (response) {
  if (response.status > 0)
    $scope.errorMsg = response.status + ': ' + response.data;
}, function (evt) {
  // Math.min is to fix IE which reports 200% sometimes
  file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
});
}
}]);