In the code which follows, both IE7, FF(2.0), and Safari(3.1) allow the user
to change the src attribute of an image based on her perusal of local file
space. Opera 9.5 doesn't seem to allow access to the path data necessary for
accomplishing this rollover effect, and I suspect that may be how it is
supposed to be according to emerging standards. That is the situation when
the HTML file is stored on localhost.
If however, one places the code on a server (see
http://granite.sru.edu/~ddailey/imageUpload.htm) then the program works from
none of the browsers. apologies in advance if I made a mistake :(
While I understand the possible risk of exposing a path name of the local
file system to script, the various use cases of allowing users to access
local images within HTML, the <canvas> tag and within <svg> all seem
self-evident to me. Is there some standard workaround to allow the user to
change the source of an image on a web page to one that is locally stored? I
used to have a dozen mini-apps that took advantage of the ability to do this
(they even used to work in Netscape 4 and IE 4), but the programs have all
broken in the past few years in all contexts except IE -- (for example here
http://granite.sru.edu/~ddailey/svg/clipembed.html where the input type=file
script is remarkably simple).
What seems odd to me is that the browsers (except Opera) all seem to expose
the path data to script, despite blocking the easy use of that data. Maybe
I'm missing something obvious.
Apologies, also, if this issue has already been discussed -- my memory seems
never to have been what it should have been.
regards,
David
-------------code------------
<html>
<head>
<script>
function change(I,s){
alert(document.getElementById("y").value)
pieces=I.src.split("/")
pieces.pop()
path=pieces.join("/")+"/"
spieces=s.split(/[\/\\]/)
file=spieces.pop()
path=spieces.join("/")+"/"
alert(path)
f.Q.value="file://localhost/"+s
I.src=f.Q.value
}
</script>
</head>
<body>
<form id="f">
<input type="file" size="70" id="y" onChange="change(z,this.value)"><br>
<input type="button" value="personalize" onclick="z.src=f.Q.value">
<img src="../p/p0.jpg" id="z" width="75" height="100" border="0" alt=""><br>
<input size="70" id="Q">
</form>
</body>
</html>
