How to implement multi-video upload with progress bar in js?

The example of this article shares the specific code for uploading multiple videos with progress bar in js for your reference. The specific content is as follows

The effect:

Quote:

 <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>

script:

//上传视频

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

The above is the detailed content of How to implement multi-video upload with progress bar in js?. For more information, please follow other related articles on the PHP Chinese website!