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

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>

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>

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("上传失败");
    }
  });

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!