在uploader.isHTML5中看不到图像预览

时间:2019-03-19 08:54:51

标签: html5 uploader

为什么我无法使用uploader.isHTML5在预览中看到所选图像?请在下面查看我的代码:

<table class="table">
      <thead>
        <tr>
          <th width="50%">Name</th>
          <th ng-show="uploader.isHTML5">Image</th>
          <th ng-show="uploader.isHTML5">Size</th>
          <th ng-show="uploader.isHTML5">Progress</th>
          <th>Status</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of uploader.queue">
          <td>
            <strong>{{ item.file.name }}</strong>
            <!-- Image preview -->

            <!--auto height-->
            <!--<div ng-thumb="{ file: item.file, width: 100 }"></div>-->

            <!--auto width-->
            <!--<div ng-show="uploader.isHTML5" ng-thumb="{ file: item._file, height: 100 }"></div>-->

            <!--fixed width and height -->
            <!--<div ng-thumb="{ file: uploader.queue[0]._file, height: 100, width: 100 }"></div>-->
          </td>
          <td ng-show="uploader.isHTML5">
            <div ng-thumb="{ file: uploader.queue[0]._file, height: 100, width: 100 }"></div>
          </td>
          <td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024 | number }} MB</td>
          <td ng-show="uploader.isHTML5">
            <div class="progress" style="margin-bottom: 0;">
              <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
            </div>
          </td>
          <td class="text-center">
            <span *ngIf="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
            <span *ngIf="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
            <span *ngIf="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
          </td>
          <td nowrap>
            <button type="button" class="btn btn-success btn-xs" (click)="upload(item.id)" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
              <span class="glyphicon glyphicon-upload"></span> Upload
            </button>
            <button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
              <span class="glyphicon glyphicon-ban-circle"></span> Cancel
            </button>

          </td>
        </tr>
      </tbody>
    </table>

有关上面代码的结果,请参见下图: enter image description here

如您所见,有一个选定的文件,但未显示为缩略图。非常感谢您的帮助。

0 个答案:

没有答案