当前位置：首页 > jquery

jquery 文件上传

2026-04-07 23:05:58jquery

jQuery 文件上传实现方法

使用原生表单和 AJAX

创建一个包含文件输入的表单，通过 jQuery 监听提交事件并使用 AJAX 发送文件数据。

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

$('#uploadForm').on('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 File Upload 插件

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

安装插件：

npm install blueimp-file-upload

HTML 结构：

jquery 文件上传

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

JavaScript 代码：

$('#fileupload').fileupload({
    url: 'upload.php',
    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 .bar').css('width', progress + '%');
    }
});

服务器端处理（PHP 示例）

创建一个简单的 PHP 脚本来处理上传的文件：

jquery 文件上传

<?php
$targetDir = "uploads/";
$targetFile = $targetDir . basename($_FILES["file"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($targetFile, PATHINFO_EXTENSION));

// 检查文件是否已存在
if (file_exists($targetFile)) {
    echo "文件已存在";
    $uploadOk = 0;
}

// 检查文件大小（限制为 5MB）
if ($_FILES["file"]["size"] > 5000000) {
    echo "文件过大";
    $uploadOk = 0;
}

// 允许特定文件格式
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
    echo "只允许 JPG, JPEG, PNG & GIF 文件";
    $uploadOk = 0;
}

// 检查上传标志
if ($uploadOk == 0) {
    echo "文件未上传";
} else {
    if (move_uploaded_file($_FILES["file"]["tmp_name"], $targetFile)) {
        echo "文件 ". htmlspecialchars(basename($_FILES["file"]["name"])). " 上传成功";
    } else {
        echo "上传过程中发生错误";
    }
}
?>