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

.button {<br> width: 193px; /* the size knock */<br> height: 62px;<br> margin: 14px 0px;<br> background: url(img/0309input.jpg);<br> overflow: hidden; /* will help avoid the output fields for the button's border */<br> position: relative; /* relative to this unit will be to position the box */<br> }<br> .button input {<br> height: 200px;<br> position: absolute; /* for easy positioning of the field */<br> top: 0; /* initial coordinates */<br> right: 0;<br> opacity: 0; /* make the box itself transparent to show the background of the button */<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>

New download:<br> <div class="button"><br> <div id="filename"></div><br> <input id="photo" type="file" name="photo" value><br> </div><br>

$(document).ready(function(){<br> $("#photo").change(function() {<br> $("#filename").text($("#photo").val());<br> });<br> });<br>

Ubuntu 10.04

The result in Opera 10.61

The result in Chrome

The result in Firefox

Actually a question: CHANT & WTF?

What is this C:\fakepath and where does it come from? The usual, not stylized, file input Opera display correct the full path from the root...

Just checked on computers with Win7, WinXP, same thing.

UPD 2:
Have done so:
function str_replace(search, replace, subject) {
return subject.split(search).join(replace);

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

However, shocked by the presence of such "security trimmings" or such a "compatibility tool", whatever. I don't remember how many sites have used this method of styling the input... it's now on them everywhere fakepath? Hmm...
October 14th 19 at 12:27
3 answers
October 14th 19 at 12:29
It security is a stray conductive in a new browser push through. Its essence is to hide the real path to the file, because it can reach via JS. The problem is "browser", and not scripted. If you want to emulate a file input on the bare JS, see one of my first articles in the blog, I was there it was customized, then can this fakat to hide.
It is possible a reference on article? - Curtis_Windler commented on October 14th 19 at 12:32
It would be good pruflink that "security is a stray", for maillist whatwg says something completely different. - jaylin52 commented on October 14th 19 at 12:35
No links to share, because when fakat saw, just ran the numbers on Google and pulled himself points from different blogs. And why secure? Half of the blogs is described + in the ass these options Internet Options > Security > Correct Zone > Custom Level > Miscellaneous too secure are. - Lisette_Hauck commented on October 14th 19 at 12:38
Looked article — no, too much code.
Have done so:

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

However, shocked by the presence of such "security trimmings" or such a "compatibility tool", whatever. - Curtis_Windler commented on October 14th 19 at 12:41
October 14th 19 at 12:31

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.

This is done for compatibility with, for example, the web interfaces of the routers which only understand Windows paths.
(IE8 (and, I think, 9) behaves the same as Opera, by the way)
Well, IE8 on Linux no one in their right mind would use as a browser... But why, then, Opera and win shows fakepath instead of the normal way?
And why would the web interfaces of routers only understand Windows paths? My reason understands Linux (reflash it under Linux). - Curtis_Windler commented on October 14th 19 at 12:34
Because it's not in the platform, and that is standard. - jaylin52 commented on October 14th 19 at 12:37
October 14th 19 at 12:33
Have a input type="file" under the standard cannot be the "value" attribute, otherwise it would be possible to pull the file from the machine.
Actually, it is there:
www.w3.org/TR/html401/interact/forms.html - Curtis_Windler commented on October 14th 19 at 12:36
Creates a file select control. User agents may use the value of the value attribute as the initial file name. - jaylin52 commented on October 14th 19 at 12:39

Find more questions by tags CSSjQueryHTML