JavaScript 上传文件并显示进度条(主页资源中有后端服务器).

满脑子技术的前端工程师

已于 2023-02-15 11:38:46 修改

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript ajax jquery

于 2021-11-18 21:43:06 首次发布

本文链接：https://blog.csdn.net/weixin_46022934/article/details/121410490

本文详细介绍了如何使用JavaScript和jQuery实现文件上传功能，并动态显示上传进度条。通过HTML、CSS创建界面，利用XMLHttpRequest的onprogress事件监听上传进度，计算已上传文件的百分比，并实时更新到页面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

系列文章目录

提示：具体呈现内容如下图片,点击上传会出现进度条

一、最终结果如下图所示

在这里插入图片描述

二、HTML和CSS样式如下

1.HTML代码如下所示

<body>
    <input type="file" name="uoload" id="uoload">
    <div class="progress">
        <div></div>
    </div>
    <!-- 按钮 -->
    <button id="d1">上传</button>
    <!-- 展示区域 -->
    <div id="show">

    </div>
</body>

2.CSS代码如下所示

 <style>
        .progress {
   
   
            width: 300px;
            border: 1px solid black;
            border-radius

最低0.47元/天解锁文章

200万优质内容无限畅学