使用jquery.form.js实现文件上传及进度条前端代码

最新推荐文章于 2025-06-22 14:51:47 发布

阿留申低压

最新推荐文章于 2025-06-22 14:51:47 发布

阅读量7.3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： ajax 前端插件

本文链接：https://blog.youkuaiyun.com/qq_35415307/article/details/72625043

本文介绍如何利用jquery.form.js插件解决ajax无法上传文件和展示进度的问题。通过搭建静态页面，设置HTML结构和CSS样式，然后绑定上传事件并利用beforeSend、uploadProgress和success回调函数实现进度条效果。

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

1、背景

ajax的表单提交只能提交data数据到后台，没法实现file文件的上传还有展示进度功能，这里用到form.js的插件来实现，搭配css样式简单易上手，而且高大上，推荐使用。

2、静态页搭建

html代码如下

<div class="upload-fileWrap">
    <button type="button" id="upload-input-btn" class="lx-btn lx-btn-default-fl">选择文件</button>
    <form id='myupload' name='myupload' action='' method='post' enctype='multipart/form-data'>
        <input id="upload-input-file" class="upload-input-file" name="file" type="file" accept="audio/mpeg, audio/x-wav" data-value-update="input">
    </form>
    <div class="upload-file-stateWrap">
        <span class="upload-file-result"></span>            
        <div class="progress hidden">
            <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                <span class="progress-bar-status">0%</span>
            </div>
        &