Список вопросов
Как зайти в Даркнет?!
25th January, 01:11
5
0
Как в tkinter из поля ввода Entry получить значение в одну переменную и обновить строку кнопкой, затем получить ещё одно введённое значение и затем сложить их. Ниже пример кода
21st July, 19:00
893
0
Программа, которая создает фейковые сервера в поиске игровых серверов CS 1.6 Steam
21st March, 17:43
948
0
Очень долго работает Update запрос Oracle
27th January, 09:58
912
0
не могу запустить сервер на tomcat HTTP Status 404 – Not Found
21st January, 18:02
905
0
Где можно найти фрилансера для выполнения поступающих задач, на постоянной основе?
2nd December, 09:48
938
0
Разработка мобильной кроссплатформенной военной игры
16th July, 17:57
1724
0
период по дням
25th October, 10:44
3955
0
Пишу скрипты для BAS только на запросах
16th September, 02:42
3720
0
Некорректный скрипт для закрытия блока
14th April, 18:33
4613
0
прокидывать exception в блоках try-catch JAVA
11th March, 21:11
4380
0
Помогите пожалуйста решить задачи
24th November, 23:53
6084
0
Не понимаю почему не открывается детальное описание продукта
11th November, 11:51
4350
0
Нужно решить задачу по программированию на массивы
27th October, 18:01
4395
0
Метода Крамера С++
23rd October, 11:55
4309
0
помогите решить задачу на C++
22nd October, 17:31
4002
0
Помогите решить задачу на python с codeforces
22nd October, 11:11
4492
0
Python с нуля: полное руководство для начинающих
18th June, 13:58
2599
0
Opera 10.61 (Linux), jQuery и стилизованный файл-инпут [Решено]
Просмотров: 396
 
Ответов: 3
CSS:
.button {
width: 193px; /* размеры кноки */
height: 62px;
margin: 14px 0px;
background: url(img/0309input.jpg);
overflow: hidden; /* поможет избежать выхода поля за границы кнопки */
position: relative; /* относительно этого блока будем позиционировать поле */
}
.button input {
height: 200px;
position: absolute; /* для более простого позиционирования поля */
top: 0; /* начальные координаты */
right: 0;
opacity: 0; /* само поле делаем прозрачным, чтобы показать фон кнопки */
filter:progid:DXImageTransform.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:
Загрузить новое:
<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
Результат в 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? Мда…
width: 193px; /* размеры кноки */
height: 62px;
margin: 14px 0px;
background: url(img/0309input.jpg);
overflow: hidden; /* поможет избежать выхода поля за границы кнопки */
position: relative; /* относительно этого блока будем позиционировать поле */
}
.button input {
height: 200px;
position: absolute; /* для более простого позиционирования поля */
top: 0; /* начальные координаты */
right: 0;
opacity: 0; /* само поле делаем прозрачным, чтобы показать фон кнопки */
filter:progid:DXImageTransform.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;
}
<div class="button">
<div id="filename"></div>
<input id="photo" type="file" name="photo" value=""/>
</div>
$("#photo").change(function() {
$("#filename").text($("#photo").val());
});
});
Это секьюрити приблуда, ща в новых браузерах пропихивается. Суть ее — скрыть реальный путь на машине к файлу, ибо его можно выцепить через JS. Проблема именно «браузерная», а не скриптовая. Если хочешь — можешь сэмулировать file input на голом JS, смотри одну из моих первых статей в блоге, я там его кастомизировал, тогда сможешь этот фейкпат скрыть.
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) ведет себя так же, как опера, к слову)
Чтобы ответить на вопрос вам нужно войти в систему или зарегистрироваться