Opera 10.61 (Linux), jQuery i stylizowane wejście pliku [Rozwiązane]

Autor:la sheila

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

Wynik w Operze 10.61



Wynik Chrome



Wynik przeglądarki Firefox



Właściwie to pytanie: WHERE & WTF?

Co to jest C: \ fakepath i skąd się bierze? Jednocześnie zwykłe, nieostre, pliki wejściowe w Operze wyświetlają poprawną pełną ścieżkę z katalogu głównego ...

UPD:
Właśnie sprawdzone na komputerach z Win7, WinXP jest taki sam.

UPD 2:
Zrobiłem to:
function str_replace (szukaj, zamień, temat) {
 return subject.split (search) .join (replace);
}

$ ("# zdjęcie"). change (function () {
var newpath = str_replace ("C: \\ fakepath \\" "& quot; $ (" # photo "). val ())
$ ("# filename"). text (newpath);
});

Działa.
Jednak zszokowany obecnością takiego "ochroniarza-pribluda" lub takiego "narzędzia kompatybilności", nie ma to znaczenia. Nie pamiętam, ile witryn używało tej metody wprowadzania stylów ... czy teraz fakepath jest wszędzie na nich? Hmm ...

Odpowiedzi

ben collier
To jest ochroniarz wtykający, przepychający się w nowych przeglądarkach. Jego istotą jest ukrycie prawdziwej ścieżki na maszynie do pliku, ponieważ można ją podłączyć przez JS. Problem jest "oparty na przeglądarce", a nie skryptowany. Jeśli chcesz, możesz emulować plik wejściowy na nagim JS, zobacz jeden z moich pierwszych blogów, dostosowałem go tam, a następnie możesz ukryć tę funkcję.
Odpowiedzi:
Czy możesz zaliczyć artykuł? - k ri
Byłoby miło pruflinkować do faktu, że jest to "pribluda bezpieczeństwa", ponieważ lista mailowa whatwg mówi coś zupełnie innego. - bradford
Nie udostępnię linku, ponieważ gdy zobaczyłem fałszywkę, po prostu przebiegłem przez Google i sam wyciągnąłem tezy z różnych blogów. I dlaczego dokładnie do bezpieczeństwa? Połowa blogów opisała to + w dupie po tych opcjach Opcje internetowe & gt; Bezpieczeństwo & gt; Prawidłowa strefa & gt; Poziom niestandardowy & gt; Różne są również w bezpieczeństwie. - xglax
Spojrzałem na artykuł - nie, trochę za dużo kodu.
Zrobiłem to:

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


Jednak wstrząśnięty obecnością takiego "strażnika-pribluda" lub takiego "narzędzia kompatybilności", nie ma znaczenia. - jessica n
stephanie miller
www.w3.org/TR/html5/common-input-element-attributes.html#common-input-element-apis

nazwa pliku
Należy zauważyć, że jest tak: "C: \ fakepath \" Podczas ustawiania musi wystąpić wyjątek INVALID_ACCESS_ERR.

Odbywa się to w celu zapewnienia zgodności z, na przykład, interfejsami internetowymi routerów, które rozumieją tylko ścieżki Windows.
(IE8 (i, jak sądzę, 9) zachowuje się w ten sam sposób jak opera, nawiasem mówiąc)
Odpowiedzi:
Cóż, IE8 pod Linuksem, którego nikt przy zdrowych zmysłach nie użyłby jako przeglądarki ... Ale dlaczego, w operze operowej, wygrywa fakepath zamiast normalnej ścieżki?
I dlaczego interfejsy sieciowe routerów rozumiałyby tylko ścieżki Windows? Z jakiegoś powodu mój doskonale rozumie Linuksa (przerzuć go spod Linuksa). - florivel
Bo nie chodzi o platformę, ale o to, że to jest standard. - bradandrews
eileen jacob
Przy typie wejściowym = "plik", standard nie może mieć atrybutu "wartość", w przeciwnym razie możliwe byłoby przeciągnięcie pliku z maszyny.
Odpowiedzi:
Właściwie to tam:
 www.w3.org/TR/html401/interact/forms.html - wyrmia
plik
Tworzy kontrolę wyboru pliku. Aplikacje klienckie mogą używać wartości początkowej nazwy pliku. - kelly korby
Oblicz wysokość (w pikselach) NSTextField w kakao? :: Doradztwo programowi pomiaru czasu :: Składnia OOP w js i używanie prototypu :: Wino, gry i otwarty sterownik ATI? :: Tworzenie vlan
Zostaw odpowiedź
Linki