Uno spazio HTML viene visualizzato come% 2520 anziché% 20

Question

Il passaggio di un nome file al browser firefox lo fa sostituire spazi con %2520 anziché %20.

Ho il seguente codice HTML in un file chiamato myhtml.html:

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

Quando carico myhtml.html in Firefox, l'immagine si presenta come immagine spezzata. Quindi faccio clic destro sul collegamento per visualizzare l'immagine e mostra questo URL modificato:

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

Che diamine? Ha convertito il mio spazio in un %2520. Non dovrebbe essere convertirlo in un %20?

Come modificare questo file HTML in modo che il browser possa trovare la mia immagine? Cosa sta succedendo qui?

Answer 1

Un po 'di spiegazioni su ciò che è %2520:

Il carattere comune spazio è codificato come %20 come avrete notato da soli. Il carattere % è codificato come %25.

Il modo in cui si ottiene %2520 è quando il tuo URL ha già un %20 in esso, e viene di nuovo urlencoded, che trasforma il %20-%2520.

Sei (o qualsiasi framework che potresti utilizzare) caratteri di doppia codifica?

Edit: espansione un po 'su questo, soprattutto per LOCALI link. Supponendo che si desidera collegare alla risorsa C:\my path\my file.html:

• se si fornisce un percorso di file locale solo, si prevede che il browser per codificare e proteggere tutti i caratteri specificati (in quanto sopra, si dovrebbe dare con spazi come mostrato, poiché % è un carattere di nome file valido e in quanto tale verrà codificato) durante la conversione in un URL corretto (vedere punto successivo).
• se si fornisce un URL con il protocollo file://, si sta sostanzialmente affermando di aver preso tutte le precauzioni e codificato ciò che ha bisogno di codifica, il resto dovrebbe essere trattato come caratteri speciali. Nell'esempio sopra, dovresti quindi fornire file:///c:/my%20path/my%20file.html. Oltre a correggere le barre, i client non dovrebbero codificare i caratteri qui.

NOTE: direzione

• Slash - slash / sono utilizzati in URL, barre \ in percorsi di Windows invertire, ma la maggior parte dei clienti lavoreranno sia con convertendoli alla corretta barra.
• Inoltre, ci sono 3 barre dopo il nome del protocollo, poiché si sta silenziosamente facendo riferimento alla macchina corrente anziché a un host remoto (il percorso completo non abbreviato sarebbe file://localhost/c:/my%20path/my%file.html), ma la maggior parte dei client funzionerà senza la parte host (vale a dire solo due barre) supponendo che tu intenda la macchina locale e aggiungendo la terza barra.

Answer 2

Quando si sta tentando di visitare un nome di file locale attraverso browser Firefox, è necessario forzare la file:\\\ protocollo (http://en.wikipedia.org/wiki/File_URI_scheme) oppure Firefox codificare il vostro spazio DUE VOLTE. Modificare il frammento di codice HTML da questo:

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

a questo:

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

o questo:

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

Poi Firefox viene notificato che questo è un nome di file locale e rende l'immagine correttamente nel browser, codifica correttamente la stringa una volta.

Link utili: http://support.mozilla.org/en-US/questions/900466

Answer 3

Per qualsiasi motivo l'url è stato codificato due volte. %25 è il segno di codifica urlencoded %. Così l'URL originale sembrava:

http://server.com/my path/ 

Poi è ottenuto urlencoded volta:

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

e due volte:

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

così si dovrebbe fare non urlencoding come altri componenti sembra a quella già per te Utilizzare semplicemente uno spazio

Answer 4

Il seguente frammento di codice ha risolto il problema. Ho pensato che questo potesse essere utile agli altri.

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

Piuttosto usando predefinito encodeURIComponent la prima riga di codice è la conversione tutto spaces in hyphens utilizzando regex /\s\g e la riga seguente appena fa il contrario, cioè converte tutti hyphens ritorna spaces utilizzando un'altra regex pattern /-/g. Qui /g è attualmente responsabile per i caratteri corrispondenti finding all.

Quando invio questo valore alla mia chiamata Ajax, attraversa come normal spaces o semplicemente %20 e quindi elimina double-encoding.