Opera 10.61 (Linux), jQuery and stylized file-input [Solved]

Asked by 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

Result in Opera 10.61



Chrome result



Firefox result



Actually the question: WHERE & WTF?

What is this C: \ fakepath and where does it come from? At the same time, ordinary, non-stylized, file-inputs in the Opera display the correct full path from the root ...

UPD:
Just checked on computers with Win7, WinXP is the same.

UPD 2:
Did this:
function str_replace (search, replace, subject) {
 return subject.split (search) .join (replace);
}

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

Works.
However, shocked by the presence of such a “security guard-pribluda”, or such a “compatibility tool”, it does not matter. I don’t remember how many sites have used this method of input styling ... is it now fakepath everywhere on them? Hmm…

Answers

ben collier
This is a security guard sticking, pushing through in new browsers. Its essence is to hide the real path on the machine to the file, because it can be hooked through JS. The problem is “browser based”, not scripted. If you want, you can emulate the file input on the bare JS, see one of my first blog posts, I customized it there, then you can hide this feature.
Replies:
Can you credit a article? - k ri
It would be nice if the link is a “security guard of the stray”, for whatwg maillist says something completely different. - bradford
I will not share the link, because when I saw the fake, I just ran through Google and snapped to myself theses from various blogs. And why exactly to the security? Half of the blogs described it + in the ass after these options Internet Options & gt; Security & gt; Correct Zone & gt; Custom Level & gt; Miscellaneous are also in security. - xglax
I looked at the article - no, a bit too much code.
Did this:

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


However, shocked by the presence of such a “security guard-pribluda”, or such a “compatibility tool”, it does not matter. - jessica n
stephanie miller
www.w3.org/TR/html5/common-input-element-attributes.html#common-input-element-apis

filename
It should be noted that the following is the case: “C: \ fakepath \” On setting, it must throw an INVALID_ACCESS_ERR exception.

This is done for compatibility with, for example, web interfaces of routers that understand only Windows paths.
(IE8 (and, I think, 9) behaves the same way as opera, by the way)
Replies:
Well, IE8 under Linux will not be used by anyone in their right mind as a browser ... But then why does the opera show win in fakepath instead of the normal path?
And why would the web interfaces of routers understand only Windows paths? For some reason, mine perfectly understands Linux (reflash it from under Linux). - florivel
Because it's not about the platform, but about the fact that this is the standard. - bradandrews
eileen jacob
The input type = “file” standard cannot have the attribute “value”, otherwise it would be possible to drag the file from the machine.
Replies:
Actually, it is there:
 www.w3.org/TR/html401/interact/forms.html - wyrmia
file
Creates a file select control. User agents may use the value of the initial file name. - kelly korby
Thread safety classes :: Advise a program for timing :: Chrome and Google Bookmarks :: Calculate height (in pixels) of an NSTextField in Cocoa? :: Creating vlan
Leave Repply for Opera 10.61 (Linux), jQuery and stylized file-input [Solved]
Useful Links