当前位置：首页 > jquery

jquery 上传文件

2026-04-07 23:04:18jquery

jQuery 文件上传实现方法

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

使用 FormData 和 AJAX

创建 HTML 表单包含文件输入框：

jquery 上传文件

<input type="file" id="fileInput" name="file">
<button id="uploadButton">上传文件</button>

jQuery 代码处理文件上传：

jquery 上传文件

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

    $.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 File Upload 插件

引入必要的插件文件：

<link href="jquery.fileupload.css" rel="stylesheet">
<script src="jquery.fileupload.js"></script>

初始化文件上传：

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

服务器端处理示例 (PHP)

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

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