unserver-unify/src/components/upload/alicloudupload-dlg.html

<div class="modal-header">
  <button class="close" ng-click="dismiss()" type="button">
    <span aria-hidden="true">
      ×
    </span>
    <span class="sr-only">
      Close
    </span>
  </button>
  <h3 class="modal-title">
    {{ 'Upload File' | translate }} - {{ setting.title | translate }}
    <span ng-if="setting.maxSize">
      ( < {{ setting.maxSize*1024 | fileSize}} )
    </span>
  </h3>
</div>
<!--
  view for single file upload
-->
<div class="modal-body form-horizontal" ng-if="!setting.multiple">
  <div>
    <div class="form-group">
      <div class="col-md-12">
        <img class="img-thumbnail" ng-if="setting.image && (setting.imageUrl || setting.ctrl.imageUrl)" ng-src="{{ setting.imageUrl || setting.ctrl.imageUrl }}"/>

     <!--    <video ng-if="ctrl.previewVideoSrc" ng-src="{{ctrl.previewVideoSrc}}" controls></video>   -->
       
        <videogular ng-if="ctrl.previewVideoSrc" vg-theme="config.theme.url">
          <vg-media vg-src="config.sources" vg-tracks="config.tracks">
          </vg-media>
          <vg-controls>
            <vg-play-pause-button>
            </vg-play-pause-button>
            <vg-time-display>
              {{ currentTime | date:'mm:ss':'+0000' }}
            </vg-time-display>
            <vg-scrub-bar>
              <vg-scrub-bar-current-time>
              </vg-scrub-bar-current-time>
            </vg-scrub-bar>
            <vg-time-display>
              {{ timeLeft | date:'mm:ss':'+0000' }}
            </vg-time-display>
            <vg-time-display>
              {{ totalTime | date:'mm:ss':'+0000' }}
            </vg-time-display>
            <vg-volume>
              <vg-mute-button>
              </vg-mute-button>
              <vg-volume-bar>
              </vg-volume-bar>
            </vg-volume>
            <vg-fullscreen-button>
            </vg-fullscreen-button>
          </vg-controls>
          <vg-buffering></vg-buffering>
           <vg-overlay-play>
           </vg-overlay-play>
        </videogular>
        
        <div class="clerfix margin-bottom-10">
        </div>
        <span ng-show="setting.image&&setting.maxheight">
          <input accept="image/*" file-model="testfile" image="ctrl.imageobj" ng-image-compress="" on-change="imageUploaded()" resize-max-height="{{setting.maxheight}}" resize-max-width="{{setting.maxwidth}}" resize-quality="0.8" resize-type="image/jpg" style="display:none" type="file"/>
          <button class="btn btn-primary" ng-class="{'pull-right': setting.image && (setting.imageUrl || setting.ctrl.imageUrl)}" ng-disabled="uploadProgress >0 && uploadProgress < 100" onclick="$(this).prev().click()">
            {{ 'Select' | translate }}
          </button>
        </span>
        <span ng-show="!setting.maxheight">
          <input accept="{{setting.accept||'image/*'}}" nv-file-select="" style="display:none" type="file" uploader="uploader"/>
          <button class="btn btn-primary" ng-class="{'pull-right': setting.ctrl.imageUrl}" ng-disabled="uploader.progress >0 && uploader.progress < 100" onclick="$(this).prev().click()">
            {{ 'Select' | translate }}
          </button>
        </span>
        <button class="btn btn-danger" ng-click="recordvoice()" ng-if="setting.audiorecord&&ctrl.allowmedia">
          {{ 'Direct Record' | translate }}
        </button>
        <button class="btn btn-danger" ng-click="recordvideo()" ng-if="setting.videorecord&&ctrl.allowmedia">
          {{ 'Record Video' | translate }}
        </button>
        <button class="btn btn-danger" ng-click="shootPhoto()" ng-if="setting.photoshoot&&ctrl.allowmedia">
          {{ 'Shoot Photo' | translate }}
        </button>
      </div>
      <img class="img-thumbnail" ng-if="setting.image&&setting.maxheight&&ctrl.imageobj" ng-src="{{ ctrl.imageobj.compressed.dataURL }}"/>
    </div>
    <div ng-repeat="item in uploader.queue">
      <div class="uploader_thumb" ng-if="!setting.maxheight&&uploader.isHTML5 && uploader.queue.length >0 && item.file.isImage" ng-thumb="{ file: item._file, height: 100 }">
      </div>
      <div ng-if="!setting.maxheight&&uploader.isHTML5 && uploader.queue.length >0" style="word-wrap: break-word">
        <strong translate="">
          Upload File
        </strong>
        : {{item.file.name }},
        <strong translate="">
          Size
        </strong>
        : {{ item.file.size | fileSize }},
        <span ng-if="nameDurations[item.file.name]">
          <strong translate="">
            Duration
          </strong>
          : {{nameDurations[item.file.name]|secondsToDateTime| date:'HH:mm:ss'}}
          <span ng-if="nameBitRate[item.file.name]" style="color:red;">
            {{ {eng : 'BitRate too high,may have issue on mobile playback!', chn:'比特率过高，手机播放也许会有问题！'} | trans }}
          </span>
        </span>
      </div>
      <div>
        <uib-progressbar class="progress-striped" max="100" value="item.progress">
          <i ng-if="item.progress && item.progress >0">
            {{item.progress}} %
          </i>
        </uib-progressbar>
      </div>
      <button class="btn btn-primary btn-block" ng-click="item.upload()" ng-if="(setting.accept!='.mp4'||ctrl.previewVideoSrc)&&(!setting.maxSize||(item.file.size <setting.maxSize * 1024))" translate="">
        Upload
      </button>
      <label ng-if="item.file.size >setting.maxSize * 1024" translate="file_max_size" translate-values="{size: setting.maxSize}" class="color-red">
      </label>
    </div>
    <button class="btn btn-primary btn-block" ng-click="ctrl.convertMp4()" ng-if="setting.convert&&ctrl.needConvert" translate="">
      Convert
    </button>
    <br/>
  </div>
</div>
<!--
  view for multiple file upload
-->
<div class="modal-body form-horizontal" ng-if="setting.multiple">
  <div>
    <div class="form-group">
      <div class="col-md-12">
        <img class="img-thumbnail" ng-if="setting.ctrl.imageUrl" ng-src="{{ setting.ctrl.imageUrl }}"/>
        <input accept="{{setting.accept||'image/*'}}" multiple="" ng-if="!setting.directory" nv-file-select="" style="display:none" type="file" uploader="uploader"/>
        <input directory="" ng-if="setting.directory" nv-file-select="" on-change="ctrl._selectedMultifile(_msFile)" style="display:none" type="file" uploader="uploader" webkitdirectory=""/>
        <button class="btn btn-primary" ng-class="{'pull-right': setting.ctrl.imageUrl}" ng-disabled="uploader.progress >0 && uploader.progress < 100" onclick="$(this).prev().click()">
          {{ 'Select' | translate }}
        </button>
      </div>
    </div>
    <button class="btn btn-info btn-block" ng-click="uploader.uploadAll()" ng-if="uploader.queue.length>3 && !ctrl.errmsg" translate="">
      Upload
    </button>
    <div ng-repeat="item in uploader.queue">
      <div ng-show="uploader.isHTML5 && uploader.queue.length >0" style="word-wrap: break-word">
        <strong>
          <span style="color:#2196F3;">
            {{item.file.type}}
          </span>
          {{'File'|translate}}
        </strong>
        : {{  item._file.webkitRelativePath||item.file.name }} ,
        <strong translate="">
          Size
        </strong>
        : {{ item.file.size | fileSize }},
        <span ng-if="nameDurations[item.file.name]">
          <strong translate="">
            Duration
          </strong>
          : {{nameDurations[item.file.name]|secondsToDateTime| date:'HH:mm:ss'}}
        </span>
        <a class="btn btn-danger btn-sm" ng-click="ctrl.remove($index)">
          <i class="fa fa-times">
          </i>
        </a>
      </div>
      <uib-progressbar class="progress-striped" max="100" value="item.progress">
        <i ng-if="item.progress && item.progress >0">
          {{item.progress}} %
        </i>
      </uib-progressbar>
      <label ng-if="item.errmsg" style="color:red;">
        {{item.errmsg}}
      </label>
    </div>
    <br/>
    <button class="btn btn-info btn-block" ng-click="uploader.uploadAll()" ng-if="uploader.queue.length>0 && !ctrl.errmsg" translate="">
      Upload
    </button>
  </div>
</div>