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

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






jQuery:
$(document).ready(function(){
$("#photo").change(function() {
$("#filename").text($("#photo").val());
});
});


Ubuntu 10.04

The result in Opera 10.61

image

The result in Chrome

image

The result in Firefox

image

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...

UPD:
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());
$("#filename").text(newpath);
});

Works.
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...
by | 13 views

3 Answers

0 like 0 dislike
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.
by
0 like 0 dislike
www.w3.org/TR/html5/common-input-element-attributes.html#common-input-element-apis
\r
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.
\r
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)
by
0 like 0 dislike
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.
by

Related questions

0 like 0 dislike
1 answer
0 like 0 dislike
4 answers
asked Mar 25, 2019 by Anarchy
0 like 0 dislike
5 answers
0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
110,608 questions
257,186 answers
0 comments
1,119 users