当前位置：首页 > jquery

jquery 上传

2026-01-13 17:01:32jquery

jQuery 文件上传方法

使用 jQuery 实现文件上传可以通过多种方式完成，以下是常见的几种方法：

使用原生表单和 AJAX

创建一个包含文件输入的表单，并通过 jQuery 的 AJAX 方法发送数据：

<form id="uploadForm" enctype="multipart/form-data">
    <input type="file" name="file" id="fileInput">
    <button type="submit">上传</button>
</form>

$('#uploadForm').submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);

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

使用 jQuery 插件

jQuery 有许多专门用于文件上传的插件，例如 jQuery File Upload：

<input type="file" id="fileupload" name="files[]" multiple>
<div id="progress">
    <div class="bar" style="width:0%"></div>
</div>

$('#fileupload').fileupload({
    url: 'upload.php',
    dataType: 'json',
    done: function(e, data) {
        console.log('上传完成:', data.result);
    },
    progressall: function(e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css('width', progress + '%');
    }
});

使用 Fetch API 替代 AJAX

现代浏览器支持 Fetch API，可以结合 jQuery 使用：

$('#uploadForm').submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);

    fetch('upload.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => console.log('上传成功:', data))
    .catch(error => console.error('上传失败:', error));
});

服务器端处理示例（PHP）

在服务器端接收文件并保存：

<?php
if ($_FILES['file']['error'] === UPLOAD_ERR_OK) {
    $tempName = $_FILES['file']['tmp_name'];
    $fileName = basename($_FILES['file']['name']);
    $uploadPath = 'uploads/' . $fileName;

    if (move_uploaded_file($tempName, $uploadPath)) {
        echo json_encode(['status' => 'success', 'file' => $fileName]);
    } else {
        echo json_encode(['status' => 'error', 'message' => '文件移动失败']);
    }
} else {
    echo json_encode(['status' => 'error', 'message' => '上传错误']);
}
?>