Ajax——上传文件及显示上传进度案例

最新推荐文章于 2024-09-03 17:07:04 发布

Zhangzilnn

最新推荐文章于 2024-09-03 17:07:04 发布

阅读量934

点赞数 2

CC 4.0 BY-SA版权

分类专栏： # Ajax案例文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/weixin_45998300/article/details/123266018

实现步骤：

定义 UI 结构

验证是否选择了文件

向 FormData 中追加文件

使用 xhr 发起上传文件的请求

监听 onreadystatechange 事件

1. 定义UI结构

    <!-- 1. 文件选择框 -->
    <input type="file" id="file1" />
    <!-- 2. 上传按钮 -->
    <button id="btnUpload">上传文件</button>
    <br />
    <!-- 3. 显示上传到服务器上的图片 -->
    <img src="" alt="" id="img" width="800" />

2. 验证是否选择了文件

 // 1. 获取上传文件的按钮
 var btnUpload = document.querySelector('#btnUpload')
 // 2. 为按钮添加 click 事件监听
 btnUpload.addEventListener('click', function() {
     // 3. 获取到选择的文件列表（files为数组）
     var fi