/    Sign up×
Community /Pin to ProfileBookmark

Sourcing images from visitors harddrive.

Copy linkTweet thisAlerts:
Jan 13.2005

Hi everyone,

I have a strange problem.

I have a website where the user will input the url of an image on their hard drive. When they press submit,

it will submit to a second page where the image will be formatted into the page contents.

However, I can’t get the browser to grab the image from their hard drive unless the page is ACTUALLY saved to their machine, not live.

I’ve tried putting file:/// in front of the url of the file for something like:

file:///c:myphotosbig.gif

but it still won’t show.

Any ideas?

I really appreciate any help! Thank you.

to post a comment
HTML

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@PeOfEoJan 13.2005 — If you want the image to be on the website the image is going to need to make its way to the server. To do this you need a file input on the form page and that file needs to be uploaded to the server. I cannot think of any other way to do it.
Copy linkTweet thisAlerts:
@sherriauthorJan 14.2005 — The image is just on there temporarily, and only for that visitor. So there's no way of getting the webpage to tell the browser to look on the visitors hard drive for the image?
Copy linkTweet thisAlerts:
@pj59Jan 14.2005 — Hello!

I assume, you don't want the user to type the image's name, but to use a file input.

If so and if you want to display the image on a second page without uploading it, what you want needs a little trick. The following is just an example; other scenarios are possible as well:

You'll have two forms on page one. One form contains an input type=file to enable the user to browse for the image. The second form simply contains a submit button. Here are two snippets:

Page one:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script language="JavaScript" type="text/javascript">
<!--
var i;
function showImg(frm,im){
im='file:///'+im.replace(/\/g,'/');
i=im
}
//-->
</script>
</head>
<body>
<form>
<input type="file" name="img"><br>
</form>
<form action="getImg.htm" target="_blank" onsubmit="showImg(this.form,document.forms[0].img.value)">
<input type="submit" value="show image">
</form>
</body>
</html>getImg.htm:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script language="JavaScript" type="text/javascript">
<!--
function getImg(){
i=opener.i;
document.images['displayImg'].src=i;
}
//-->
</script>
</head>
<body onload="getImg()">
<image name="displayImg">
</body>
</html>Regards PJ
Copy linkTweet thisAlerts:
@ray326Jan 14.2005 — Here's an exerpt from a page off one of my old web sites that demonstrates what you're wanting to do.
<i>
</i>&lt;script language="javascript" type="text/javascript"&gt;
function handler()
{
image = document.getElementById("theimage");
name = document.getElementById("fname").value;
image.src = "file:///"+name;
document.getElementById("imagelabel").innerHTML = "&lt;h3&gt;"+name+"&lt;/h3&gt;";
image.style.display = "inline";
return false;
}
&lt;/script&gt;

&lt;h3&gt;File Open&lt;/h3&gt;
&lt;p&gt;It's pretty easy to (mis)use the "file" type input element as a means
to launch a File Open Dialog simply to get the path to a file.&lt;/p&gt;
&lt;p&gt;The path to a local file must be URL encoded to work in this demo.
To display an image from your local
disk you have to take the content of the file name box and prepend a
&lt;code&gt;file:///&lt;/code&gt; protocol. Any &lt;em&gt;special&lt;/em&gt; characters, like a space
character, should be replaced with its hex literal equivalent; &lt;code&gt;%20&lt;/code&gt;
for the aformentioned space. For example:&lt;/p&gt;
&lt;p&gt;&lt;code&gt;C:My DocumentsMy Picturesfoo.gif&lt;/code&gt;
would become
&lt;br /&gt;&lt;code&gt;file:///C:My%20DocumentsMy%20Picturesfoo.gif&lt;/code&gt;.
&lt;/p&gt;
&lt;p&gt;The final kicker here is that you can't directly alter the value of the file
type input widget because that would be a &lt;strong&gt;huge&lt;/strong&gt; security hole.
So in the end you have to just treat that value as read-only and make use of it
outside the expected manner.&lt;/p&gt;
&lt;form name="fnform" id="fnform" onsubmit="return handler()"&gt;
&lt;input type="file" name="fname" id="fname" size="60"/&gt;&lt;br /&gt;
&lt;input type="submit" value="Show Image"&gt;
&lt;/form&gt;
&lt;div id="imagelabel"&gt;&lt;/div&gt;
&lt;img id="theimage" src="" style="display:none;"/&gt;

Copy linkTweet thisAlerts:
@sherriauthorJan 18.2005 — AH HA!!

The truth comes out. I did some more testing and tried the scripts you guys suggested. At first they didn't work. I was using Firefox. Then tried IE and bam! Works. That got me thinking... so I tried what I WAS doing (having php generate html with the local url in there) and bingo that works!

It seems that IE does not stop you from sourcing images from the user's hard drive, but firefox does (and mozilla?).

This is good, but not good. I'd rather not have to put a restriction to limit users to IE since that is kind of unprofessional.

Any ideas?

Thank you very much by the way for the suggestions so far!
Copy linkTweet thisAlerts:
@ray326Jan 18.2005 — Unless I clipped something important out of what I posted, it was working with FF and IE.
Copy linkTweet thisAlerts:
@sherriauthorJan 18.2005 — Well,

I appreciate everyone's help, but it's a moot point now. The project is off. Apparently the client wants everything WYSIWYG on the scale of a windows application. Nothing in pixels either, only inches. And it should print out EXACTLY as shown on the screen. As a web application.

Had to tell him that it's NOT a one programmer, $1000 dollar job.


*sigh*
Copy linkTweet thisAlerts:
@ray326Jan 18.2005 — Had to tell him that it's NOT a one programmer, $1000 dollar job.[/QUOTE] Not only that, it's NOT a web application either.
×

Success!

Help @sherri spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...