使用jQuery $.ajax上传图片时遭遇SyntaxError错误的求助

云原生阿岚

2026-4-14

看起来这个错误的根源不在你的AJAX上传代码本身，而是在成功回调里插入返回内容的步骤——错误栈明确指向了$('#adform1result').html(returndata)这一行，说明后端返回的returndata内容有问题，导致jQuery无法正常将它插入DOM。

我给你几个排查方向，你可以一步步试：

先确认后端到底返回了什么：在success函数里先加一行console.log(returndata)，暂时注释掉html()那行，重新上传图片后打开浏览器控制台看输出。比如：
```
success: function (returndata) {            
    console.log(returndata);
    // $('#adform1result').html(returndata);    
}
```
你大概率会发现返回的不是预期的干净HTML：可能是PHP的错误警告（比如文件上传权限不足、路径错误的报错）、格式错误的JSON，或者是包含未转义特殊字符的内容，这些都会导致插入DOM时触发语法错误。

检查后端PHP脚本的输出：打开upload-ad-image.php，确保它没有输出无关内容（比如echo调试信息、PHP的原生错误提示），而且返回的内容是合法的HTML或者JSON。如果是返回JSON，那不能直接用html()插入，得先解析后再生成对应的HTML，比如：

success: function (returndata) {            
    try {
        const res = JSON.parse(returndata);
        // 举个例子：根据返回的JSON生成展示内容
        $('#adform1result').html(`上传成功：<img src="${res.imageUrl}" alt="广告图">`);
    } catch(e) {
        console.error('解析返回内容失败', e);
        // 解析失败时用text()展示原始内容，避免DOM错误
        $('#adform1result').text(returndata);
    }
}

排查HTML格式问题：如果后端返回的是HTML，检查是否有未闭合的标签、引号不匹配的情况（比如某个属性值没加引号、脚本标签没闭合），这些细节都会导致jQuery处理DOM插入时出错。

另外提一句：你的AJAX代码本身没什么明显问题，enctype: 'multipart/form-data'其实可以去掉，因为FormData对象会自动让jQuery正确设置请求头，不过这不是导致当前错误的原因。

备注：内容来源于stack exchange，提问作者Jameel