使用ajaxFileUpload.js实现文件上传功能(附代码)

来源：聚合数据类型：技术文章发布：2026-04-07 16:38:06

在现代Web开发中，文件上传是一个非常常见的功能。传统的表单提交方式虽然简单，但在用户体验和交互性上存在诸多不足，例如页面刷新、无法实时反馈上传状态等。为了解决这些问题，许多开发者选择使用AJAX技术来实现异步文件上传，以提升用户操作的流畅性和体验。

其中，ajaxFileUpload.js 是一个基于 jQuery 的轻量级文件上传插件，能够方便地实现无刷新文件上传，并支持多种格式的文件类型。本文将详细介绍如何使用 ajaxFileUpload.js 实现文件上传功能，并提供完整的代码示例，帮助开发者快速上手。

一、ajaxFileUpload.js 简介

ajaxFileUpload.js 是一个基于 jQuery 的 JavaScript 插件，专门用于实现 AJAX 文件上传功能。它通过隐藏的 <iframe> 或 <form> 表单实现文件上传，避免了页面刷新的问题。该插件具有以下特点：

无需修改后端接口，即可实现异步上传；

支持多文件上传；

可自定义上传前后的回调函数；

兼容主流浏览器，包括 IE、Chrome、Firefox 等。

由于其简洁易用的特点，ajaxFileUpload.js 成为了许多前端开发者在实现文件上传时的首选工具。

二、准备工作与引入

在使用 ajaxFileUpload.js 前，需要先引入 jQuery 和该插件的 JS 文件。可以通过 CDN 或本地引入的方式进行加载。

引入 jQuery

在 HTML 文件的 <head> 标签内添加如下代码：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

引入 ajaxFileUpload.js

同样在 <head> 或 <body> 中引入插件文件：

<script src="path/to/ajaxfileupload.js"></script>

如果没有现成的文件，可以去 GitHub 或其他资源网站下载，或者自行封装。

三、HTML 页面结构设计

接下来，我们需要构建一个简单的 HTML 页面，包含文件上传控件和上传按钮。例如：

<div>
    <input type="file" id="fileUpload" name="fileUpload">
    <button onclick="uploadFile()">上传</button>
</div>
<div id="responseMessage"></div>

上述代码创建了一个文件输入框和一个上传按钮，以及一个用于显示上传结果的容器。

四、JavaScript 实现文件上传逻辑

在 JavaScript 中，我们通过调用 ajaxFileUpload 方法实现文件上传。下面是一个完整的示例代码：

function uploadFile() {
    var file = $('#fileUpload').val();
    if (!file) {
        alert("请选择要上传的文件！");
        return;
    }
    $.ajaxFileUpload({
        url: '/upload', // 后端接收文件的地址
        secureuri: false,
        fileElementId: 'fileUpload',
        dataType: 'json',
        success: function (response) {
            if (response.status === 'success') {
                $('#responseMessage').html('文件上传成功：' + response.message);
            } else {
                $('#responseMessage').html('文件上传失败：' + response.message);
            }
        },
        error: function (data, status, e) {
            $('#responseMessage').html('上传过程中发生错误：' + e);
        }
    });
}

这段代码实现了以下功能：

检查用户是否选择了文件；

调用 $.ajaxFileUpload 方法发送文件；

根据返回结果更新页面上的提示信息。

五、后端处理文件上传

在使用 ajaxFileUpload.js 进行文件上传时，后端需要接收并处理上传的文件。以下是一个基于 Node.js 和 Express 的简单示例：

const express = require('express');
const multer = require('multer');
const app = express();
// 设置存储路径和文件名
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, './uploads/');
    },
    filename: function (req, file, cb) {
        cb(null, Date.now() + '-' + file.originalname);
    }
});
const upload = multer({ storage: storage });
app.post('/upload', upload.single('fileUpload'), (req, res) => {
    if (!req.file) {
        return res.json({ status: 'error', message: '未接收到文件' });
    }
    res.json({ status: 'success', message: '文件上传成功！' });
});
app.listen(3000, () => {
    console.log('服务器运行在 http://localhost:3000');
});

在这个示例中，我们使用了 multer 中间件来处理文件上传，并将文件保存到 ./uploads/ 目录下。如果上传成功，返回 JSON 格式的结果。