【问题标题】:Is it possible to set accept-charset for new FormData (XHR2) object or workaround是否可以为新的 FormData (XHR2) 对象或解决方法设置接受字符集
【发布时间】:2014-03-29 14:35:51
【问题描述】:

这里是示例代码 (http://jsfiddle.net/epsSZ/1/):

HTML:

<form enctype="multipart/form-data" action="/echo/html" method="post" name="fileinfo" accept-charset="windows-1251">
  <label>Label:</label>
  <input type="text" name="label" size="12" maxlength="32" value="får løbende" /><br />
  <input type="submit" value="Send standart">
</form>
<button onclick="sendForm()">Send ajax!</button>

JS:

window.sendForm = function() {
  var oOutput = document.getElementById("output"),
     oData = new FormData(document.forms.namedItem("fileinfo"));
  var oReq = new XMLHttpRequest();
  oReq.open("POST", "/echo/html", true);
  oReq.send(oData);
}

当我通过标准表单提交以这种旧方式提交时,请求有效负载如下所示:

------WebKitFormBoundary2890GbzEKCmB08rz
Content-Disposition: form-data; name="label"

f&#229;r l&#248;bende

但是当我提交这种 AJAX 方式时,它看起来并没有什么不同:

------WebKitFormBoundaryPO2mPRFKj3zsKVM5
Content-Disposition: form-data; name="label"

får løbende

如您所见,在前一种情况下,有些字符被替换为字符实体, 但是在使用FormData 的情况下,有纯字符串,这当然很好,因为它是 utf-8,但是有没有可能让它表现得像标准表单提交?

【问题讨论】:

    标签: javascript ajax character-encoding form-data xmlhttprequest-level2


    【解决方案1】:

    您的问题的答案是。你不能改变它。根据XMLHttpRequest2 TRFormData 构造的数据被显式编码为UTF-8。没有提到允许更改它。

    通常的 mimeType 或 Content-Type=charset 对于多部分请求变得无效,因为出于完全相同的原因它的处理方式不同。

    引用,

    如果 data 是 FormData 让请求实体主体是运行 multipart/form-data 编码算法的结果,其中 data 作为表单数据集,UTF-8 作为显式字符编码

    设mime type为“multipart/form-data;”、一个U+0020空格字符、“boundary=”和multipart/form-data编码算法生成的multipart/form-data边界字符串的串联.

    希望这会有所帮助!

    更新

    如果你愿意放弃

    new FormData(document.forms.namedItem("fileinfo"));

    new FormData().append("name", "value")

    可能有一个可行的解决方案。让我知道您是否正在寻找。

    另一个更新

    做了一点跑来跑去。 Updated fiddle with all modes

    故事就是这样,

    1 form with accept-charset="utf8" => 默认行为

    内容不需要任何额外的转义/编码。所以请求触发时文本完整为får løbende

    2 form with accept-charset="windows-1251" => 你的情况

    内容需要额外的转义/编码,因为这里浏览器的默认字符集是utf8。所以内容被转义,然后被触发,即发送的内容是f&amp;#229;r l&amp;#248;bende

    3FormData constructed with form element

    内容不需要任何额外的转义/编码,因为它默认为utf8。所以请求会触发文本为får løbende

    4FormData constructed, and then appended with escaped data

    内容仍然是 utf8 编码,但在附加到表单数据之前调用 escape(content) 并没有什么坏处。这意味着请求以f%E5r%20l%F8bende 的文本触发。还是没有骰子吧?

    我错了,不。仔细观察[阅读 => 凝视了几分钟....] 在

    f&amp;#229;r l&amp;#248;bende

    f%E5r%20l%F8bende

    然后一切就绪 - %E5(十六进制)=&amp;#229;(十进制)。所以基本上escape()是Javascript的处理方式,基于%的编码,不是HTML友好的。

    类似&amp;#;,我们知道是 HTML 的编码方式。所以我给ajax设置了另一种模式,[这就是你要找的,我猜]

    5FormData constructed, and then appended with html-escaped data

    内容仍为 utf8 编码。使用来自stackoverflow 的这段精彩代码,像 HTML 编码一样逃避它并没有什么坏处。瞧,使用文本f&amp;#229;r l&amp;#248;bende

    触发的请求

    Updated fiddle with all modes

    希望这有助于清除它!

    全面支持 windows-1251 的更新

    привет får løbende 输入在早期模式 5 中失败。更新小提琴http://jsfiddle.net/epsSZ/6/

    在这里使用https://stackoverflow.com/a/2711936/1304559 和我的解决方案的组合。所以问题是逃避一切。所以现在只转义 windows-1251 字符集中不存在的字符。

    我希望这会有所帮助!

    【讨论】:

    • 如果不太复杂的话,很高兴看到append 的解决方案,但这个答案还令人满意。
    • append 解决方案更新了答案。不得不说,谢谢你的提问!
    • @Dfr append 的解决方案有什么帮助吗?
    • 不完全,因为它也转义了所有 windows-1251 字符,这是不希望的。目前我正在使用InLatin-1_Supplement unicode 集在服务器上转义它
    • 你能举个例子吗?
    【解决方案2】:

    感谢您提出这个问题,我玩得很开心! :)
    替换

    <form enctype="multipart/form-data" action="/echo/html" method="post" name="fileinfo" accept-charset="windows-1251">
    

    <form enctype="multipart/form-data" action="/echo/html" method="post" name="fileinfo" accept-charset="utf-8">
    

    问题是接受字符集是windows-1251 而不是utf-8

    之后

    oReq.open("POST", "/echo/html", true);
    

    你也可以加

    oReq.overrideMimeType('text/html; charset=UTF-8');
    oReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    

    但这不能解决问题。

    祝你好运。 :)

    【讨论】:

    • 不幸的是,这个解决方案对我不起作用。这听起来很奇怪,但我需要将此表单发布为 windows-1251 并从浏览器获取这些字符实体。
    • 也许您可以发送 UTF-8 并使用 this 转换 windows-1251 php 端
    猜你喜欢
    • 2012-02-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-03-03
    • 1970-01-01
    • 2014-04-18
    • 2013-09-22
    • 1970-01-01
    相关资源
    最近更新 更多