Question

这是我的AngularJS代码，用于在用户选择文件时显示图像预览

  <form action="<?php echo $this->getFormAction();?>" id="contactproForm" method="post" ng-app="myApp" ng-controller="myCtrl" enctype="multipart/form-data">

     <label for="file"><?php echo Mage::helper('contactpro')->__('Attachment') ?></label>

    <div class="input-box">
       <input  type="file" id="file" class="input-text" ngf-select ng-model="picFile" name="attachement" accept="image/png, image/jpeg, image/jpg, application/msword, application/vnd.ms-excel, application/pdf " />
    </div>

    <label for="file"><?php echo Mage::helper('contactpro')->__('Image Preview') ?></label>
    <img ng-show="picFile[0] != null" ngf-src="picFile[0]" class="thumb">

   </form>

此行显示选择图像时的拇指图像预览

   <img ng-show="picFile[0] != null" ngf-src="picFile[0]" class="thumb">

现在的问题是，当我选择图像时，图像拇指正确显示但是当我选择pdf，doc或任何其他文件格式时，它会显示裂缝图像拇指。如何在这里放置一些AngularJs条件，使其仅在选择图像时显示图像拇指，否则不显示任何内容。

Answer 1

通过在输入中添加onChange并检查控制器中的文件扩展名来解决它。

<div class="input-box">
  <input type="file" id="file" class="input-text" ngf-change="onChange($files)" ngf-select ng-model="picFile" name="attachement" accept="image/png, image/jpeg, image/jpg, application/msword, application/vnd.ms-excel, application/pdf " />
</div>
<img ng-show="isImage(fileExt)" ngf-src="picFile[0]" class="thumb">


$scope.isImage = function(ext) {
      if(ext) {
        return ext == "jpg" || ext == "jpeg"|| ext == "gif" || ext=="png"
      }
    }

See Updated Plunkr

Answer 2

我已删除该功能及其工作而没有控制台错误

@{
    double? budget = item.Budget;
    double? myPrice = budget / count;
    double roundMyPrice = Math.Round(myPrice, MidpointRounding.AwayFromZero);
}

Angularjs仅在所选文件为图像时显示图像预览

2 个答案: