jQuery 插件实现视频上传进度条的终极指南

使用 jQuery 插件在视频上传中显示进度条

问题

上传视频时需要在界面上显示实时上传进度条，但 jQuery Validate 插件无法正常显示进度条。

解决方案

步骤 1：设置 HTML

<div class="row">
  <div class="col-lg-6">
    <label for="vide_Upload">选择视频</label>
    <input id="vide_Upload" type="file" accept="video/*" />
  </div>
  <div class="col-lg-6">
    <div class="progress videoProgressBar">
      <div class="progress-bar"></div>
    </div>
  </div>
</div>

步骤 2：编写 jQuery

$("form").submit(function(event) {
  event.preventDefault();
  var formData = new FormData(this);

  $.ajax({
    url: "{{ route('video.store') }}",
    type: "POST",
    data: formData,
    processData: false,
    contentType: false,
    beforeSend: function() {
      $(".videoProgressBar").show();
      $(".progress-bar").css("width", "0%");
    },
    uploadProgress: function(event, position, total, percentComplete) {
      $(".progress-bar").css("width", percentComplete + "%");
    },
    success: function(response) {
      // 处理上传成功后的响应
    },
    error: function(xhr, status, error) {
      // 处理上传失败后的错误
    }
  });
});

常见问题解答

1. 如何修改进度条颜色？

在 CSS 中调整 .progress-bar 的 background-color 属性。

2. 如何显示上传的文件名？

在 HTML 中添加以下代码：

<span id="file-details"></span>

并在 jQuery 中更新：

$.ajax({
  ...
  beforeSend: function() {
    ...
    var fileName = $("#vide_Upload")[0].files[0].name;
    $("#file-details").text("上传中：" + fileName);
  },
  ...
});

3. 如何处理大文件上传？

使用分块上传技术或服务器端分块上传插件。

4. 如何禁用拖放功能？

移除以下 HTML 代码：

<div class="form-group">
  <label for="vide_Upload" id="file-drag"></label>
</div>

5. 如何验证上传文件类型？

在 jQuery 中添加以下代码：

var allowedTypes = ["video/mp4", "video/webm", "video/ogg"];
if (!allowedTypes.includes($("#vide_Upload")[0].files[0].type)) {
  alert("文件类型不受支持");
  return false;
}