Сведения о вопросе

nikolya

21:06, 1st October, 2020

Теги

CSS   jQuery   HTML    

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? Мда…



  Сведения об ответе

SSESION

03:56, 27th August, 2020

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


  Сведения об ответе

прога

09:36, 13th August, 2020

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) ведет себя так же, как опера, к слову)


  Сведения об ответе

PIRLO

21:06, 1st October, 2020

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


Ответить на вопрос

Чтобы ответить на вопрос вам нужно войти в систему или зарегистрироваться