使用blueimp jQuery-File-Upload插件上传时特殊字符乱码如何解决？

问题背景 #

此前blueimp的jQuery-File-Upload插件运行正常，应用无需使用原始文件名上传文件。现在要求原始文件名也能正确上传并存储到Web应用中，上传采用JSON格式。在add回调中控制台日志显示特殊字符（ä、ö、ü等）正常，但调用data.submit()后，服务器端获取的原始文件名出现字符丢失或乱码。

前端修复方案 #

1. 强制设置请求编码头 #

在add回调提交前，为请求添加UTF-8编码的Content-Type头，确保文件名以UTF-8格式传输：

add: function(e, data) {
    $.each(data.files, function (index, file) {
        console.log('Added file: ' + file.name);
        // 将文件名手动加入formData
        data.formData = data.formData || {};
        data.formData['originalName_' + index] = file.name;
    });
    // 设置请求头为UTF-8编码
    data.headers = {'Content-Type': 'application/json; charset=utf-8'};
    data.submit();
}

2. 手动编码文件名 #

如果直接传输仍有问题，可对文件名进行URI编码，后端再对应解码：

add: function(e, data) {
    $.each(data.files, function (index, file) {
        console.log('Added file: ' + file.name);
        data.formData = data.formData || {};
        // 对文件名进行URI编码
        data.formData['originalName_' + index] = encodeURIComponent(file.name);
    });
    data.headers = {'Content-Type': 'application/json; charset=utf-8'};
    data.submit();
}

后端修复方案 #

1. 确保请求解析编码为UTF-8 #

以PHP为例，在接收请求的脚本开头设置编码：

// 响应和请求均使用UTF-8编码
header('Content-Type: application/json; charset=utf-8');
mb_internal_encoding('UTF-8');

2. 解码前端传递的文件名 #

如果前端用encodeURIComponent编码，后端对应解码：

// 从POST参数获取并解码
$originalName = urldecode($_POST['originalName_0']);

// 或从JSON请求体解析
$requestBody = file_get_contents('php://input');
$data = json_decode($requestBody, true);
$originalName = urldecode($data['originalName_0']);

3. 存储时保持UTF-8编码 #

• 数据库存储：确保表字段字符集设置为utf8mb4，支持完整Unicode字符。
• 文件系统存储：Linux系统设置环境变量LANG=en_US.UTF-8；Windows系统使用Unicode API写入文件名，避免编码转换丢失字符。

额外检查点 #

• 升级插件版本：使用最新版jQuery-File-Upload，旧版本可能存在编码兼容问题。
• 禁用forceIframeTransport：该选项会强制iframe上传，容易导致编码丢失，JSON格式上传建议关闭此选项。

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