jquery上传图片单图多图

使用jQuery实现单图和多图上传，可以结合HTML的<input type="file">标签和JavaScript的FormData对象。以下是一个简单的实现方式：

HTML部分：

<!-- 单图上传 -->
<input type="file" id="single-image-upload" />
 
<!-- 多图上传 -->
<input type="file" id="multi-image-upload" multiple />

jQuery部分：

$(document).ready(function() {
    // 单图上传
    $('#single-image-upload').change(function() {
        uploadImage(this.files[0], 'single');
    });
 
    // 多图上传
    $('#multi-image-upload').change(function() {
        var files = this.files;
        for (var i = 0; i < files.length; i++) {
            uploadImage(files[i], 'multi');
        }
    });
});
 
function uploadImage(file, type) {
    var formData = new FormData();
    formData.append('image', file);
 
    $.ajax({
        url: 'upload.php', // 服务器端的上传文件接口
        type: 'POST',
        data: formData,
        processData: false,  // 告诉jQuery不要处理发送的数据
        contentType: false,  // 告诉jQuery不要设置内容类型头
        success: function(response) {
            console.log('上传成功：', response);
            if (type === 'single') {
                // 单图上传成功后的操作
            } else if (type === 'multi') {
                // 多图上传成功后的操作
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log('上传失败：', textStatus);
        }
    });
}

服务器端（upload.php）：

<?php
if ($_FILES['image']['error'] === UPLOAD_ERR_OK) {
    $tmpName = $_FILES['image']['tmp_name'];
    $name = $_FILES['image']['name'];
    move_uploaded_file($tmpName, "uploads/$name");
    echo "文件上传成功";
} else {
    echo "文件上传失败";
}
?>

确保服务器端的上传文件夹（这里是uploads/）有写入权限。这个例子中，服务器端的脚本仅仅是将上传的文件移动到uploads/文件夹下，并输出相应的信息。实际应用中，你可能需要根据自己的需求来编写服务器端的处理代码。