无法在Angular.js中使用ng-file-upload设置图像URL inro锚标记

时间:2017-03-20 05:47:01

标签: javascript angularjs ng-file-upload

我正在使用ngFileUpload从驱动器上传图像,我需要将选定的图像绑定到锚标记中。我在下面解释我的代码。

<div ng-repeat="mul in mulImage">
<input type="file" class="filestyle form-control" data-size="lg" name="upload_{{$index}}" id="bannerimage_{{$index}}"  ng-model="mul.image" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="2MB" ngf-select="onFileSelect1($index);">
<a href="mul.image" data-spzoom data-spzoom-width="400" data-spzoom-height="400"><img ngf-thumbnail="mul.image" name="pro" id="imgBig" border="0" style="width:32px; height:32px; border:#808080 1px solid;" ng-if="mul.image !=null"></a>
</div>

当用户从驱动器中选择任何图像时,使用img ngf-thumbnail进行显示,但此处我需要在a href=""中设置特定图像网址的同一时间。在这里,我做了一些事情,但它没有按预期工作。

2 个答案:

答案 0 :(得分:0)

在html中:

<div ng-repeat="mul in mulImage">
    <input type="file" ng-model="mul.image" ng-change="getFileUrl(mul)">
    <a href="mulImage[mulImage.indexOf(mul)].imageLink"></a>
</div>

在控制器中:

$scope.getFileUrl = function(image) {
    var reader = new FileReader();
    reader.readAsDataURL(image.image);
    reader.onload = function () {
        $scope.mulImage[mulImage.indexOf(image)].imageLink = reader.result;
    };
}

答案 1 :(得分:0)

您应该使用<a ng-href="mul.image"代替<a href="mul.image"

谢谢, 维诺德