能否无需后端脚本，用jQuery实现图片上传并保存至文件夹？

很遗憾地说，仅靠jQuery（纯前端）是没办法完成将上传的图片保存到服务器指定文件夹这个操作的。

原因很简单：前端代码运行在用户的浏览器里，出于安全限制，浏览器不允许前端脚本直接读写服务器上的文件系统。要把文件存到服务器的文件夹里，必须要有后端程序来接收前端传过来的文件数据，然后完成写入服务器磁盘的操作。

接下来看看你写的这段jQuery代码，存在几个关键问题：

• 没有指定AJAX请求方法（应该用type: "POST"）
• 没有把组装好的form_data作为请求数据传递出去（缺少data: form_data）
• url: "/img"如果只是一个文件夹路径，没有对应的后端处理脚本，根本无法接收和处理文件

下面给你一个完整的前后端配合示例，前端用jQuery，后端用PHP（你也可以换成Node.js、Python等其他熟悉的后端语言）：

前端HTML + jQuery代码 #

<input type="file" id="avatar" accept="image/*">
<button id="upload">上传图片</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).on("click", "#upload", function() {
    var file_data = $("#avatar").prop("files")[0];
    // 先判断用户是否选择了文件
    if (!file_data) {
        alert("请先选择要上传的图片！");
        return;
    }
    var form_data = new FormData();
    form_data.append("file", file_data);
    
    $.ajax({
        url: "upload.php", // 后端处理脚本的路径
        type: "POST",
        data: form_data,
        dataType: 'json',
        cache: false,
        contentType: false,
        processData: false,
        success: function(response) {
            if (response.success) {
                alert("图片上传成功！保存路径：" + response.file_path);
            } else {
                alert("上传失败：" + response.error);
            }
        },
        error: function() {
            alert("请求出错，请检查后端脚本！");
        }
    });
});
</script>

后端PHP代码（upload.php） #

<?php
// 指定要保存的文件夹，确保这个文件夹有写入权限
$target_dir = "uploads/";
// 如果文件夹不存在，自动创建
if (!file_exists($target_dir)) {
    mkdir($target_dir, 0777, true);
}

// 获取上传文件的完整路径
$target_file = $target_dir . basename($_FILES["file"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

// 验证是否为真实图片
if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["file"]["tmp_name"]);
    if($check !== false) {
        $uploadOk = 1;
    } else {
        $uploadOk = 0;
    }
}

// 检查文件是否已存在
if (file_exists($target_file)) {
    echo json_encode(["success" => false, "error" => "文件已存在"]);
    exit;
}

// 限制文件大小为5MB
if ($_FILES["file"]["size"] > 5000000) {
    echo json_encode(["success" => false, "error" => "文件过大，最大允许5MB"]);
    exit;
}

// 仅允许指定图片格式
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
    echo json_encode(["success" => false, "error" => "仅允许JPG, JPEG, PNG & GIF格式"]);
    exit;
}

// 所有验证通过后保存文件
if ($uploadOk == 1) {
    if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
        echo json_encode(["success" => true, "file_path" => $target_file]);
    } else {
        echo json_encode(["success" => false, "error" => "保存文件时出错"]);
    }
}
?>

需要额外注意：

• 确保服务器上的uploads文件夹有写入权限（一般设置为777，或根据服务器安全配置调整）
• 后端脚本可以根据你熟悉的语言编写，核心逻辑都是接收前端的FormData、验证文件合法性、写入指定目录

内容的提问来源于stack exchange，提问作者kamran shah