当前位置：首页 > jquery

jquery图片上传

2026-03-02 14:33:51jquery

jQuery图片上传的实现方法

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

使用FormData和AJAX上传

创建HTML表单和文件输入框：

<input type="file" id="fileInput" accept="image/*">
<button id="uploadBtn">上传图片</button>
<div id="preview"></div>

jQuery代码处理上传：

$(document).ready(function() {
    $('#uploadBtn').click(function() {
        var file = $('#fileInput')[0].files[0];
        if (!file) {
            alert('请选择图片');
            return;
        }

        var formData = new FormData();
        formData.append('image', file);

        $.ajax({
            url: 'upload.php', // 替换为后端处理URL
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                $('#preview').html('<img src="' + response.filePath + '">');
            },
            error: function() {
                alert('上传失败');
            }
        });
    });
});

使用jQuery插件简化上传

jQuery File Upload插件是常用选择：

$('#fileupload').fileupload({
    url: 'upload.php',
    dataType: 'json',
    done: function(e, data) {
        $.each(data.result.files, function(index, file) {
            $('<p/>').text(file.name).appendTo('#files');
        });
    }
});

图片预览功能实现

在文件选择后立即显示预览：

$('#fileInput').change(function() {
    var file = this.files[0];
    if (file) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#preview').html('<img src="' + e.target.result + '">');
        }
        reader.readAsDataURL(file);
    }
});

后端处理示例(PHP)

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

    if (move_uploaded_file($tempPath, $uploadPath)) {
        echo json_encode(['filePath' => $uploadPath]);
    } else {
        http_response_code(500);
    }
} else {
    http_response_code(400);
}
?>

注意事项