文件上传进度案例

最新推荐文章于 2025-04-23 12:46:51 发布

原创

最新推荐文章于 2025-04-23 12:46:51 发布 · 2.1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #前端 #jquery

该博客详细介绍了如何利用HTML、JavaScript（jQuery）和XMLHttpRequest实现文件上传功能，并重点讲解了如何监听xhr.upload.onprogress事件以显示上传进度条。内容包括定义UI结构、验证文件选择、发起上传请求及样式设计等步骤。

案例效果：

一、上传文件

1.定义UI结构

   <!-- 1. 文件选择框 -->
    <input type="file" id="file1" />
    <!-- 2. 上传文件的按钮 -->
    <button id="btnUpload">上传文件</button>
    <br />
    <!-- 3. img 标签，来显示上传成功以后的图片 -->
    <img src="" alt="" id="img" width="800" />
  </div>

2.验证是否选择了文件

// 1. 获取到文件上传按钮
    var btnUpload = document.querySelector('#btnUpload')
    // 2. 为按钮绑定单击事件处理函数
    btnUpload.addEventListener('click', function () {
      // 3. 获取到用户选择的文件列表
      var files = document.querySelector('#file1').files
      if (files.length <= 0) {
        return alert('请选择要上传的文件！')
      }
//...后续业务逻辑

)}