Heim > Web-Frontend > js-Tutorial > Wie implementiert man den Multi-Video-Upload mit Fortschrittsbalken in js?

Wie implementiert man den Multi-Video-Upload mit Fortschrittsbalken in js?

零下一度
Freigeben: 2017-07-24 16:17:27
Original
1897 Leute haben es durchsucht

Das Beispiel in diesem Artikel teilt den spezifischen Code zum Hochladen mehrerer Videos mit Fortschrittsbalken in js als Referenz. Der spezifische Inhalt ist wie folgt

Effekt:

Zitat:


 <link rel="stylesheet" href="bootstrap.css" rel="external nofollow" >
 <script src="jquery.fileupload.js"></script>
 <script src="http://malsup.github.com/jquery.form.js"></script>
Nach dem Login kopieren

html:


<p class="form-group">
      <label>产品视频:</label>
      <p class="videoUpfile">
        <input type="file" name="avatarVideo" class="avatarVideo"><a class="btn deleteAvatarVideo" href="javascript:;" rel="external nofollow" rel="external nofollow" >删除</a>
        <p class="videoMaterials">
          <p class="progress">
            <p class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
              <span class="sr-only">0% Complete</span>
            </p>
          </p>
          <p class="files"></p>
          <p class="showimg"></p>
          <input type="hidden" value="" name="video_id[]">
          <p style="color: #b92c28" class="img_upload_info"></p>
        </p>
      </p>
      <p class="videoUpfile">
        <input type="file" name="avatarVideo" class="avatarVideo"><a class="btn deleteAvatarVideo" href="javascript:;" rel="external nofollow" rel="external nofollow" >删除</a>
        <p class="videoMaterials">
          <p class="progress">
            <p class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
              <span class="sr-only">0% Complete</span>
            </p>
          </p>
          <p class="files"></p>
          <p class="showimg"></p>
          <input type="hidden" value="" name="video_id[]">
          <p style="color: #b92c28" class="img_upload_info"></p>
        </p>
      </p>
</p>
Nach dem Login kopieren

Skript:


//上传视频

$(".avatarVideo").change(function() {
  var _this = $(this);
  _this.wrap("<form class=&#39;fileUploadeVideo&#39; action=&#39;/admin/uploadimg/addVideo&#39; method=&#39;post&#39; enctype=&#39;multipart/form-data&#39;></form>");
  _this.parents(&#39;.fileUploadeVideo&#39;).ajaxSubmit({
    dataType: &#39;json&#39;,
    beforeSend: function () {
      $(".progress").show();
    },
    uploadProgress: function (event, position, total, percentComplete) {
      var percentVal = percentComplete + &#39;%&#39;;
      _this.parents(&#39;.videoUpfile&#39;).find(".progress-bar").width(percentComplete + &#39;%&#39;);
      _this.parents(&#39;.videoUpfile&#39;).find(".progress-bar").html(percentVal);
      _this.parents(&#39;.videoUpfile&#39;).find(".sr-only").html(percentComplete + &#39;%&#39;);
    },
    success: function (data) {
      if(data.code==100) {
        _this.parents(&#39;.videoUpfile&#39;).find(".files").html("文件名: " + data.video_title);
        _this.parents(&#39;.videoUpfile&#39;).find("input[type=hidden]").val(data.video_id);
        alert("上传成功!");
      }else{
        alert("上传失败");
      }
    },
    error: function () {
      alert("上传失败");
    }
  });
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie implementiert man den Multi-Video-Upload mit Fortschrittsbalken in js?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage