使用 AJAX + 多部分表单数据 + UTF-8 编码发送文件和文本

Posted 2023-05-08

【中文标题】使用 AJAX + 多部分表单数据 + UTF-8 编码发送文件和文本

【英文标题】：Sending files and text with AJAX + multipart form data + UTF-8 encoding

【发布时间】：2014-03-28 08:56:43

【问题描述】：

我整天都在尝试让客户端在 FormData() 对象中使用 UTF-8 编码发送 AJAX 请求。我在服务器端使用 Sping MVC，但这不适用于这种情况，因为：

我可以 POST 到服务器的非多部分请求，我可以捕获请求并查看：

Content-Type: application/x-www-form-urlencoded; charset=UTF-8

我还可以看到编码好的字符（á、é、í、ó、ú）。

如果我使用 AJAX + 文件上传 + FormData 发布，请使用以下代码：

var data = new FormData();
data.append('body', jq("#sp_body").val());
data.append('signature', jq("#sp_signature").val());
data.append('subject', jq("#sp_subject").val());
data.append('email', jq("#sp_email").val());
data.append("file", jq("#sp_file")[0].files[0]);
jq.ajax(
    url: contextPath + "/jobs/" + job + "/sendmail",
    data: data,
    cache: false,
    dataType: 'text',
    processData: false,
    contentType: false,
    mimeType: "multipart/form-data",
    type: 'POST',
    success: function(result)
        data = jq.parseJSON(result);
        if (data["statusCode"] == "success") 
            jq("#save_status").html("Email sent!").show().delay(5000).fadeOut(200);
         else 
            jq("#save_status").html(data["errors"]).show().delay(5000).fadeOut(200);
        
    ,
    error: function (xhr, ajaxOptions, thrownError) 
        alert(xhr.status);
        alert(thrownError);
    
);

然后我捕获请求并看到：

Content-Type: multipart/form-data; boundary=---------------------------279972256522979

但是头部没有UTF-8，非拉丁字符是乱码。

问题是，如何使用 FormData POST（因为我想同时 POST 字符串和文件）设置 UTF-8 编码？

我读过UTF-8 text is garbled when form is posted as multipart/form-data，但这对我没有帮助。

【问题讨论】：

Uploading both data and files in one form using Ajax?的可能重复

@DallaRosa 不，我已经阅读了有关该问题的所有 30-40 个主题，没有一个可以帮助我解决问题，而您指出的主题只是将两件事都发送到一个单一的AJAX 请求，我已经“成功”地完成了，除了编码。 HTTP 页面还具有元标头设置charset=utf-8。

【参考方案1】：

在您的 servlet 中，您必须再次设置编码：

public void extractRequest(HttpServletRequest request) throws Exception 
    if (request != null) 
        boolean isMultipart = ServletFileUpload.isMultipartContent(request);
        if (isMultipart) 
            FileItemFactory factory = new DiskFileItemFactory();
            ServletFileUpload upload = new ServletFileUpload(factory);
            List<FileItem> items = null;
            try 
                items = upload.parseRequest(request);
            
            catch (FileUploadException e) 
                e.printStackTrace();
            
            while (itr.hasNext()) 
                FileItem item = itr.next();
                if (item.isFormField()) 
                    String name = item.getFieldName();
                    String value = item.getString("UTF-8");
                ...
                ...

在您的 html 中：

<form id="formid" action="<yourpath>" enctype="multipart/form-data" 
method="POST" accept-charset="utf-8">

当然，如果你使用的是数据库，同样的东西也必须在那里设置

如果这有帮助，请告诉我；否则我们可以看看其他领域。

【讨论】：

感谢您的回答。我终于让它工作了。你知道问题是什么吗？好吧，当我在服务器上部署应用程序时，一切都按预期工作。事实证明，Windows 下的 Eclipse IDE + Tomcat 串联导致了问题（找不到确切原因，因为我花时间查看并在需要的地方更改配置文件），但是当我将 WAR 部署在服务器，一切正常。

很高兴听到它正在工作，感谢您在这里分享您的解决方案 :)