Angularjs显示图像preVIEW只有当所选的文件图像 [英] Angularjs Show Image preview only if selected file is image

问题描述

下面是我的角度JS code，显示图像preVIEW当用户选择文件

Here is my angular js code to show image preview when user select file

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

选择图像时，这条线显示大拇指图像preVIEW

This line is displaying thumb image preview when image is selected

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

现在的问题是当IM选择的图像会正确显示图像大拇指，但是当IM选择PDF，DOC或将显示图像裂缝拇指任何其他格式。我怎样才能把一些角JS状况这里，所以它会显示图像拇指只有选择图像，否则其显示没有。

Now problem is when im selecting image it will display image thumb correctly but when im selecting pdf,doc or any other format it will display crack image thumb. how can i put some angular js condition here so it will display image thumb only if image is selected otherwise its display none.

推荐答案

通过添加一个onchange到你的投入和做在控制器​​中的文件扩展名的检查解决了这个问题。

solved it by adding an onChange to your input and doing a check for the file extension in the controller.

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

查看更新后Plunkr

这篇关于Angularjs显示图像preVIEW只有当所选的文件图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！