Opera 10.61 (Linux), jQuery и стилизованный файл-инпут [Решено]?

Question

[bigdogsru]

CSS:

.button {<br/>
 width: 193px; /* размеры кноки */<br/>
 height: 62px;<br/>
 margin: 14px 0px;<br/>
 background: url(img/0309input.jpg);<br/>
 overflow: hidden; /* поможет избежать выхода поля за границы кнопки */<br/>
 position: relative; /* относительно этого блока будем позиционировать поле */<br/>
}<br/>
.button input {<br/>
 height: 200px;<br/>
 position: absolute; /* для более простого позиционирования поля */<br/>
 top: 0; /* начальные координаты */<br/>
 right: 0;<br/>
 opacity: 0; /* само поле делаем прозрачным, чтобы показать фон кнопки */<br/>
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);<br/>
 cursor: pointer;<br/>
 font-size: 200px;<br/>
 z-index: 5;<br/>
}<br/>
#filename {<br/>
 z-index: 3;<br/>
 position: absolute;<br/>
 top: 6px;<br/>
 left: 6px;<br/>
 width: 184px;<br/>
 height: 19px;<br/>
 overflow: hidden;<br/>
}<br/>

HTML:

Загрузить новое:<br/>
&lt;div class=&quot;button&quot;&gt;<br/>
&lt;div id=&quot;filename&quot;&gt;&lt;/div&gt;<br/>
&lt;input id=&quot;photo&quot; type=&quot;file&quot; name=&quot;photo&quot; value=&quot;&quot;/&gt;<br/>
&lt;/div&gt;<br/>

jQuery:

$(document).ready(function(){<br/>
 $(&quot;#photo&quot;).change(function() {<br/>
 $(&quot;#filename&quot;).text($(&quot;#photo&quot;).val());<br/>
 });<br/>
});<br/>

Ubuntu 10.04



Результат в Opera 10.61







Результат в Chrome







Результат в Firefox







Собственно вопрос: ЧЯДНТ & WTF?



Что это еще за C:\fakepath и откуда он берется? При этом обычные, не стилизованные, файл-инпуты в Опере отображают правильный полный путь от корня…



UPD:

Только что проверила на компах с Win7, WinXP — то же самое.



UPD 2:

Сделала так:

function str_replace(search, replace, subject) {

return subject.split(search).join(replace);

}



$("#photo").change(function() {

var newpath = str_replace(«C:\\fakepath\\», "", $("#photo").val());

$("#filename").text(newpath);

});



Работает.

Однако шокирована наличием такой «секьюрити-приблуды», или же такого «средства совместимости», неважно. Я уже и не помню, на каком количестве сайтов использовала этот способ стилизации инпута… это теперь на них везде fakepath? Мда…

Answer 1

[BaBL]

Это секьюрити приблуда, ща в новых браузерах пропихивается. Суть ее — скрыть реальный путь на машине к файлу, ибо его можно выцепить через JS. Проблема именно «браузерная», а не скриптовая. Если хочешь — можешь сэмулировать file input на голом JS, смотри одну из моих первых статей в блоге, я там его кастомизировал, тогда сможешь этот фейкпат скрыть.

Comments

[bigdogsru]

Можно ссылочку на статью?

[Ivan]

Хорошо бы пруфлинк на то, что это «секьюрити приблуда», ибо мейллист whatwg говорит совершенно другое.

[BaBL]

Ссылкой не поделюсь, ибо когда фейкпат увидел, просто пробежался по гуглу и надергал себе тезисов из разных блогов. А почему именно к секьюру? Половина блогов так это описала + в осле эти опции Internet Options > Security > Correct Zone > Custom Level > Miscellaneous тоже в секьюре находятся.

[bigdogsru]

Посмотрела статью — нет, многовато кода.
Сделала так:

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


Однако шокирована наличием такой «секьюрити-приблуды», или же такого «средства совместимости», неважно.

Answer 2

[Ivan]

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

filename
On getting, it must return the 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.

Это сделано в целях совместимости с, например, веб-интерфейсами роутеров, которые понимают только виндовые пути.
(IE8 (и, думаю, 9) ведет себя так же, как опера, к слову)

Comments

[bigdogsru]

Ну, IE8 под линуксом никто в здравом уме не будет использовать как браузер… Но почему тогда опера и в win показывает fakepath вместо нормального пути?
И с чего бы веб-интерфейсам роутеров понимать только виндовые пути? Мой почему-то прекрасно понимает линуксовые (перепрошивала его из-под линукса).

[Ivan]

Потому что дело не в платформе, а в том, что это стандарт.

Answer 3

[Евгений]

У input type=«file» по стандарту не может быть атрибута «value», иначе можно было бы утянуть файл с машины.

Comments

[BaBL]

Вообще-то, оно там есть:
www.w3.org/TR/html401/interact/forms.html

[BaBL]

file
Creates a file select control. User agents may use the value of the value attribute as the initial file name.