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

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



bea50c1b.png



Результат в Chrome



58355f00.png



Результат в Firefox



60b9ec0e.png



Собственно вопрос: ЧЯДНТ & 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? Мда…
  • Вопрос задан
  • 3169 просмотров
Решения вопроса 1
@BaBL
Это секьюрити приблуда, ща в новых браузерах пропихивается. Суть ее — скрыть реальный путь на машине к файлу, ибо его можно выцепить через JS. Проблема именно «браузерная», а не скриптовая. Если хочешь — можешь сэмулировать file input на голом JS, смотри одну из моих первых статей в блоге, я там его кастомизировал, тогда сможешь этот фейкпат скрыть.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
iSage
@iSage
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) ведет себя так же, как опера, к слову)
Ответ написан
@Nc_Soft
У input type=«file» по стандарту не может быть атрибута «value», иначе можно было бы утянуть файл с машины.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
SummerWeb Ярославль
от 120 000 до 180 000 ₽
Brightdata Тель-Авив
от 5 500 до 6 500 $
Market-place Ростов-на-Дону
от 100 000 до 200 000 ₽
20 июн. 2024, в 17:11
400 руб./за проект
20 июн. 2024, в 17:08
3500 руб./в час
20 июн. 2024, в 16:57
3000 руб./за проект