Question

我想在选择新图片时创建缩略图。 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方法？

Answer 1

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

看看：

ng-file-upload

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

stdClass Object
(
    [SCI-6] => stdClass Object
        (
            [quantity] => 11
            [id] => SCI-6
            [price] => 15
            [name] => notebooks
        )

    [SCI-7] => stdClass Object
        (
            [quantity] => 1
            [id] => SCI-7
            [price] => 10
            [name] => posters
        )

    [SCI-8] => stdClass Object
        (
            [quantity] => 2
            [id] => SCI-8
            [price] => 15
            [name] => pen
        )

    [SCI-9] => stdClass Object
        (
            [quantity] => 4
            [id] => SCI-9
            [price] => 100
            [name] => charger
        )

    [SCI-10] => stdClass Object
        (
            [quantity] => 1
            [id] => SCI-10
            [price] => 10.25
            [name] => News Paper
        )

)

 <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>

输入类型文件更改时如何传递角度值

1 个答案: