如何使用AJAX实现带图片上传的无刷新表单提交

你遇到的这个问题特别常见——核心原因是你用的$.serialize()方法只能序列化文本类表单字段，根本没法处理文件上传的数据。要实现带文件的无刷新AJAX提交，咱们得换用**FormData对象**来封装整个表单内容，包括文件。

修改后的JavaScript代码 #

把你原来的AJAX逻辑改成下面这样就行：

$("#form").submit(function(e) { 
    e.preventDefault(); 
    // 创建FormData对象，传入当前表单元素，自动封装所有字段（包括文件）
    var formData = new FormData(this);

    $.ajax({ 
        url: 'config.php', 
        type: 'POST', 
        data: formData,
        // 这两个参数必须设置，否则jQuery会破坏文件上传的格式
        contentType: false,
        processData: false,
        success: function () { 
            $(".upClass").html("Updated"); 
        },
        // 可以加个错误回调方便调试
        error: function(xhr, status, error) {
            console.error('上传出错:', error);
            $(".upClass").html("Failed to update");
        }
    }) 
})

关键细节说明 #

• FormData对象：它会自动抓取表单里的所有输入内容，包括文件输入框的二进制数据，完美适配文件上传场景。
• contentType: false：告诉jQuery不要自定义请求头，浏览器会自动为FormData生成正确的multipart/form-data格式（带分隔符），这是文件上传的必要条件。
• processData: false：禁止jQuery把FormData转换成字符串，保持它的原始二进制结构，不然文件数据会直接损坏。

你的HTML表单无需改动 #

你已经正确设置了enctype="multipart/form-data"属性，这是文件上传必须的，保持原样就好：

<form id="form" method="POST" enctype="multipart/form-data"> 
    <div class="form-group"> 
        <input type="text" class="form-control" name="site_title"> 
    </div> 
    <div class="form-group"> 
        <textarea class="form-control" name="site_description" ></textarea> 
    </div> 
    <div class="form-group"> 
        <input type="file" name="fileToUpload" id="fileToUpload"> 
    </div> 
    <div class="form-group"> 
        <button type="submit" class="btn btn-primary upClass">Update</button> 
    </div> 
</form>

这样修改后，就能实现无刷新提交表单，同时正常完成文件上传了，而且你的config.php不用做任何改动（因为它已经支持常规的文件上传逻辑）。

内容的提问来源于stack exchange，提问作者Berkay O.