当前位置：首页 > jquery

jquery 上传

2026-03-02 11:29:37jquery

jQuery 文件上传的实现方法

使用 jQuery 实现文件上传可以通过多种方式，包括原生 AJAX、插件或第三方库。以下是几种常见方法：

使用 FormData 和 AJAX

jquery 上传

通过 HTML5 的 FormData 对象收集表单数据，配合 jQuery 的 AJAX 方法发送到服务器。

<input type="file" id="fileInput">
<button id="uploadBtn">上传</button>

$('#uploadBtn').click(function() {
    var fileData = new FormData();
    fileData.append('file', $('#fileInput')[0].files[0]);

    $.ajax({
        url: '/upload',
        type: 'POST',
        data: fileData,
        processData: false,
        contentType: false,
        success: function(response) {
            console.log('上传成功', response);
        },
        error: function(xhr) {
            console.error('上传失败', xhr.statusText);
        }
    });
});

使用 jQuery File Upload 插件

jquery 上传

jQuery File Upload 是一个功能强大的插件，支持多文件上传、拖放和进度显示。

<input id="fileupload" type="file" name="files[]" multiple>
<div id="progress">
    <div class="progress-bar"></div>
</div>

$('#fileupload').fileupload({
    url: '/upload',
    dataType: 'json',
    done: function(e, data) {
        $.each(data.result.files, function(index, file) {
            $('<p>').text(file.name + ' 上传完成').appendTo('body');
        });
    },
    progressall: function(e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .progress-bar').css('width', progress + '%');
    }
});

服务器端处理示例（Node.js）

以下是一个简单的 Node.js Express 服务端代码，用于接收上传的文件：

const express = require('express');
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

const app = express();

app.post('/upload', upload.single('file'), (req, res) => {
    res.json({ message: '文件上传成功', file: req.file });
});

app.listen(3000, () => console.log('服务器启动'));