127

将文件名传递给 firefox 浏览器会导致它%2520%20.

我在一个名为的文件中有以下 HTML myhtml.html

<img src="C:\Documents and Settings\screenshots\Image01.png"/>

当我加载myhtml.html到 Firefox 时,图像显示为损坏的图像。所以我右键单击链接查看图片,它显示了这个修改后的 URL:

file:///c:/Documents%2520and%2520Settings/screenshots/Image01.png
                    ^
                    ^-----Firefox changed my space to %2520.

有没有搞错?它把我的空间变成了%2520. 它不应该将其转换为%20吗?

如何更改此 HTML 文件以便浏览器可以找到我的图像?这里发生了什么?

4

6 回答 6

255

稍微解释一下那%2520是什么:

%20公共空格字符按照您自己的说明进行编码。%字符编码%25为.

你得到的方式%2520是当你的 url 已经有 a%20时,再次被 urlencoded 转换%20%2520.

您(或您可能正在使用的任何框架)是双重编码字符吗?

编辑: 对此进行一些扩展,尤其是对于本地链接。假设您要链接到资源C:\my path\my file.html

  • 如果您仅提供本地文件路径,则浏览器应在转换时对给定的所有字符进行编码和保护(在上面,您应该给它加上空格,因为%它是一个有效的文件名字符,因此它将被编码)到正确的 URL(见下一点)。
  • 如果您提供带有file://协议的 URL,则基本上说明您已采取所有预防措施并编码了需要编码的内容,其余应视为特殊字符。在上面的示例中,您应该因此提供file:///c:/my%20path/my%20file.html. 除了修复斜线之外,客户端不应在此处对字符进行编码。

笔记:

  • 斜杠方向 - /URL 中使用正斜杠\,Windows 路径中使用反斜杠,但大多数客户端都可以通过将它们转换为正确的正斜杠来使用它们。
  • 此外,协议名称后面有 3 个斜杠,因为您默默地指的是当前机器而不是远程主机(完整的未缩写路径是file://localhost/c:/my%20path/my%file.html),但同样大多数客户端将在没有主机部分的情况下工作(即只有两个斜杠) 假设您的意思是本地计算机并添加第三个斜杠。
于 2013-04-18T14:04:46.783 回答
16

对于某些(可能是有效的)原因,url 被编码了两次。%25是 urlencoded%符号。所以原始网址看起来像:

http://server.com/my path/

然后它被 urlencoded 一次:

http://server.com/my%20path/

两次:

http://server.com/my%2520path/

所以你不应该做 urlencoding -在你的情况下- 因为其他组件似乎已经适合你了。只使用一个空格

于 2013-04-18T14:04:24.743 回答
7

当您尝试通过 firefox 浏览器访问本地文件名时,您必须强制使用file:\\\协议(http://en.wikipedia.org/wiki/File_URI_scheme),否则 firefox 将对您的空间进行两次编码。从此更改 html 片段:

<img src="C:\Documents and Settings\screenshots\Image01.png"/>

对此:

<img src="file:\\\C:\Documents and Settings\screenshots\Image01.png"/>

或这个:

<img src="file://C:\Documents and Settings\screenshots\Image01.png"/>

然后通知firefox这是一个本地文件名,它在浏览器中正确呈现图像,正确编码字符串一次。

有用的链接: http: //support.mozilla.org/en-US/questions/900466

于 2013-04-18T14:01:45.560 回答
2

尝试使用这个

file:///c:/Documents%20and%20Settings/screenshots/Image01.png

每当您尝试使用 cmd 或任何 html 标签在浏览器中打开本地文件时,请使用“file:///”并将空格替换为 %20(空格的 url 编码)

于 2021-03-20T10:44:25.107 回答
0

以下代码片段解决了我的问题。认为这可能对其他人有用。

var strEnc = this.$.txtSearch.value.replace(/\s/g, "-");
strEnc = strEnc.replace(/-/g, " ");

而是使用默认值encodeURIComponent,我的第一行代码将全部转换spaceshyphens使用正则表达式模式/\s\g,而下一行则相反,即将全部转换hyphensspaces使用另一个regex pattern /-/g. 这里/g实际上是负责finding all匹配字符。

当我将此值发送到我的 Ajax 调用时,它会作为normal spaces或简单地遍历%20,从而摆脱double-encoding.

于 2015-10-01T07:28:31.950 回答
-1

尝试这个?

encodeURIComponent('space word').replace(/%20/g,'+')

于 2018-05-10T05:15:54.647 回答