4

ユーザーがファイルを選択したときに画像プレビューを表示する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 条件をここに配置するにはどうすればよいですか。

4

2 に答える 2

6

入力に ​​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"
      }
    }

更新された Plunkr を参照してください

于 2015-05-20T11:07:42.190 に答える