O Opera 10.61 (Linux), o jQuery e o estilizado arquivo-инпут [Resolvido]

CSS:
.button {
width: 193px; /* tamanho кноки */
height: 62px;
font-size: 14px 0px;
background: url(img/0309input.jpg);
overflow: hidden; /* ajuda a evitar a saída de campo para a borda do botão */
position: relative; /* relativamente a esta unidade, vamos posicionar a caixa */
}
.button, input {
height: 200px;
position: absolute; /* para facilitar o posicionamento do campo */
top: 0; /* as coordenadas iniciais */
right: 0;
opacity: 0; /* o campo fazemos transparente para mostrar o plano de fundo do botão */
filter:progid:DXImageTransform.A Microsoft.Alpha(opacity=0);
cursor: pointer;
font-size: 200px;
z-index: 5;
}
#filename {
z-index: 3;
position: absolute;
top: 6px;
left: 6px;
width: 184px;
height: 19px;
overflow: hidden;
}


HTML:
Baixe o novo:
<div class="button">
<div id="filename"></div>
<input id="photo" type="file" name="photo" value=""/>
</div>


jQuery:
$(document).ready(function(){
$("#photo").change(function() {
$("#filename").text($("#photo").val());
});
});


Ubuntu 10.04

O resultado em Opera 10.61



O resultado no Chrome



O resultado no Firefox



Na verdade a pergunta: ЧЯДНТ & WTF?

O que é ainda por C:\fakepath e de onde ele vem? Quando normais, não estilizadas, arquivo-инпуты na Ópera mostram o correto caminho completo a partir da raiz...

UPD:
Só que testou no faq com o Win7, WinXP é a mesma coisa.

UPD 2:
Fez assim:
function str_replace(search replace, subject) {
return assunto.split(search).join(replace);
}

$("#photo").change(function() {
var novocaminho = str_replace("C:\\fakepath\\", "", $("#photo").val());
$("#filename").text(novocaminho);
});

Trabalha.
No entanto, chocada com a existência de tal "segurança-приблуды", ou mesmo "ferramentas de compatibilidade", não importa. Eu já não me lembro qual a quantidade de sites usou este método de definição de estilo de инпута... agora é sobre eles em todos os lugares fakepath? Mda...


Answers 3:

Share:


ElishaPlayz_ Pro
Answer 1

É a segurança приблуда, ontem em novos navegadores пропихивается. A sua essência — esconder a verdadeira viagem de carro para o arquivo, pois ele pode ser выцепить através de JS. O problema é o "browser", e não um compressor de ficheiros com organização. Se desejas — podes сэмулировать file input do nada, JS, olha um dos meus primeiros artigos no blog, eu estou lá do seu кастомизировал, então, pode esta фейкпат ocultar.


Sunil Bhat
Answer 2

www.w3.org/TR/html5/common-input-element-attributes.html#common-input-element-apis

filename
Getting On, it must the return string "C:\fakepath\" followed by the filename of the first file in the list of selected files, if any, or the empty string if the list is empty. On setting, it must throw an INVALID_ACCESS_ERR exception.

Isto é feito para fins de compatibilidade com, por exemplo, web interfaces de roteadores, que só entendem виндовые caminho.
(IE8 (e, acho, 9) se comporta como a ópera, a palavra)


Ysabella Barnes
Answer 3

Você input type="file" a norma não pode ser atributo "value", caso contrário, poderia ser утянуть o arquivo com a máquina.