在线演示案例 http://x.zkdygl.com/course/2

{% if selectedFile.source|default() == 'Aliyun' %}
    {% set file = {'id': selectedFile.uri, 'filename': selectedFile.uri, 'convertStatus': selectedFile.status, 'source': selectedFile.source, 'length': '0', 'fileSize': '0' } %}
    {% set selectedFile = {'status': file.convertStatus, "type":"video",'source': selectedFile.source, 'name': file.filename, 'uri': selectedFile.uri} %}
{% else %}
  {% if file is not empty %}
      {% set selectedFile = {'id': file.id, 'name': file.filename, 'status': file.convertStatus, 'source': 'self', 'length': file.length, 'size': file.fileSize} %}
  {% endif %}
{% endif %}
{% set courseType = courseType|default('course') %}
<script>
    var html = '';
</script>
<input type="hidden" name="media" id="media" value="{{ selectedFile|default('')|json_encode }}">
<div class="file-chooser-bar {% if not file|default(null) %}hidden {% endif %}">
  <span data-role="placeholder">{{ file.filename|default(null) }}</span>
  <button class="btn btn-link btn-sm js-choose-trigger" type="button">
    <i class="glyphicon glyphicon-edit"></i>
    {{ 'course.plan_task.activity_manage.download.edit'|trans }}
  </button>

  <div class="alert alert-warning" data-role="waiting-tip"
       style="display:none;">{{'course.plan_task.activity_manage.download.converting_tips'|trans|raw}}
  </div>
</div>
<div class="file-chooser-main {% if file|default(null) %}hidden {% endif %}">
  <div class="file-chooser-nav">
    <ul class="nav nav-pills nav-pills-sm  nav-pills-gray mb0" id="material">
    {#  {% if mediaType == 'video' and not hideImportVideo|default(false) %}
        <li role="presentation" class="active">
          <a class="js-import-video" href="#import-video-panel" data-link="{% if link|default(null) and link != 'self' %} {{ link }}{% endif %}">{{'course.plan_task.activity_manage.download.import_video'|trans}}</a>
        </li>
      {% endif %}#}
      <li role="presentation" >
        <a class="js-import-video" onclick="html = $('#import-video-panel').html(); $('.mts').nextAll().remove();" href="#import-video-panel" data-link="{% if link|default(null) and link != 'self' %} {{ link }}{% endif %}">MP4</a>
      </li>
        {% if mediaType == 'video' and not hideImportVideo|default(false) %}
          <li role="presentation" class="active">
            <a class="js-import-video" onclick="if(html!=''){$('#import-video-panel').html(html);}" href="#import-video-panel" data-link="{% if link|default(null) and link != 'self' %} {{ link }}{% endif %}">{{'course.plan_task.activity_manage.download.import_video'|trans}}</a>
          </li>
        {% endif %}

      <li role="presentation" {% if mediaType == 'video' and not hideImportVideo|default(false) %} {% else %} class="active"{% endif %}><a
            href="#chooser-upload-panel">{{'course.plan_task.activity_manage.download.upload_files'|trans}}</a></li>
      <li role="presentation"><a href="#chooser-material-panel">{{'course.plan_task.activity_manage.download.chooser_from_material'|trans}}</a></li>
      <li role="presentation"><a href="#chooser-course-panel">{{'course.plan_task.activity_manage.download.chooser_from_course'|trans}}</a></li>
      {% if mediaType == 'download' %}
        <li role="presentation"><a href="#import-link-panel">{{'course.plan_task.activity_manage.download.link'|trans}}</a>
        </li>
      {% endif %}
      {% if is_plugin_installed('AliyunOss') %}
          {% if mediaType == 'download' %}
            <li role="presentation"><a href="#import-aliyunoss-panel">{{'阿里云存储'|trans}}</a>
            </li>
          {% endif %}
      {% endif %}
    </ul>
  </div>
  <div class="tab-content ">
    <div class="tab-pane file-chooser-tab  {% if mediaType == 'video' and not hideImportVideo|default(false) %} {% else %} active{% endif %}" id="chooser-upload-panel">
      {% include 'file-chooser/parts/upload-file.html.twig' %}
    </div>

    <div class="tab-pane " id="chooser-material-panel">
      {% include 'file-chooser/parts/materiallib-choose.html.twig' %}
    </div>

    <div class="tab-pane file-chooser-tab" id="chooser-course-panel">
      {% include 'file-chooser/parts/course-file-choose.html.twig' %}
    </div>

    {% if mediaType == 'video' and not hideImportVideo|default(false) %}
      <div class="tab-pane file-chooser-tab active" id="import-video-panel">
        {% include 'file-chooser/parts/import-video.html.twig' %}
      </div>
    {% endif %}

    {% if mediaType == 'download' %}
      <div class="tab-pane file-chooser-tab" id="import-link-panel">
        {% include 'file-chooser/parts/import-link.html.twig' %}
      </div>
    {% endif %}
    {% if is_plugin_installed('AliyunOss') %}
        {% if mediaType == 'download' %}
          <div class="tab-pane file-chooser-tab" id="import-aliyunoss-panel">
              {{ render(controller('AliyunOssPlugin:AliyunOss:upload',{})) }}
          </div>
        {% endif %}
    {% endif %}
  </div>

</div>

{% if mediaType == 'download' %}
  <p class="mbl mtl"><label>{{'course.plan_task.activity_manage.download.file_name'|trans}}</label><span class="js-current-file">{{'course.plan_task.activity_manage.download.upload_btn'|trans}}</span></p>
  <div class="row">
    <div class="col-sm-10"><input class="form-control " type="text" id="file-summary" name="description" placeholder="{{'course.plan_task.activity_manage.download.input_placeholder'|trans}}"></div>
    <div class="col-sm-2"><a class="btn btn-primary btn-block js-add-file-list">{{'course.plan_task.activity_manage.download.add_btn'|trans}}</a></div>
  </div>
  <span class="color-success js-success-redmine"></span>
  <span class="color-danger js-danger-redmine"></span>
{% endif %}