asked on

Accessing a local image dynamically from an <img> tag

Hi,

I'm trying to setup a script that will dynamically show the user a thumbnail of an image before it is uploaded. This is handy since the user can see a preview of the image (to make sure it's the one they expected) before they upload it. I'm dealing with some non-savvy computer users, so this functionality is highly desired. It works fine with Internet Explorer, but with Firefox and other Mozilla browsers it won't display the image.

COBOLdinosaur, this sounds like it may be up your ally :)

Here's a snippet of code that works in IE:

<script>
function show(id) { document.getElementById(id).style.display = 'block'; }
function hide(id) { document.getElementById(id).style.display = 'none'; }
</script>

<div id="div_upload_file">
<font style="font-variant:small-caps; font-size:16px; font-weight:bold;">Image to Upload</font><br />
<input id="upload_file" type="file" size="48" name="upload_file" value="" onchange="hide('div_upload_file'); var img = document.getElementById('upload_preview'); show(img.id); img.src = this.value; img.alt = this.value;" style="border:1px solid black;" />
</div>
<img id="upload_preview" src="#" style="width:200px; height:131px; display:none;" alt="" />

Is this some kind of security "feature" of Mozilla based browsers, or am I just setting the <img> src incorrectly? Cd&?
-Doug

Jan Louwerens

In your javascript, try:

img.src = 'file://' + this.value;

dougday

ASKER

Thanks for responding. Already tried that. No luck. I've also tried escaping all spaces in this.value into "%20", but that didn't help either.
-Doug

Jan Louwerens

I tested it in Opera 7.54 and Firefox 1.02 and it worked ok for me. I even tested with paths and filenames with spaces and withought any special encoding, and they all worked ok.

But then again, my original test html file I was using was also a local file, so that may have an affect on it also.

dougday

ASKER

Hm... maybe I need to upgrade my Firefox. Now that I think about it, I'm still on 1.0. I'll try that and see if that works.

Thanks again :)
-Doug

Jan Louwerens

Here's my full test, just so you can see the results I got:

---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>blah</title>
</head>
<body>

<script type="text/javascript">
function show(id) { document.getElementById(id).style.display = 'block'; }
function hide(id) { document.getElementById(id).style.display = 'none'; }

function displayThumbnail(element)
{
hide('div_upload_file');
var img = document.getElementById('upload_preview');
show(img.id);
img.src = 'file://' + element.value;
img.alt = element.value;
}
</script>

<div id="div_upload_file">
<font style="font-variant:small-caps; font-size:16px; font-weight:bold;">Image to Upload</font><br />
<input id="upload_file" type="file" size="48" name="upload_file" value="" onchange="displayThumbnail(this);" style="border:1px solid black;" />
</div>
<img id="upload_preview" src="#" style="width:200px; height:131px; display:none;" alt="" />

</body>
</html>

ASKER CERTIFIED SOLUTION

Jan Louwerens

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

GrandSchtroumpf

It should work from the local file system indeed, but it throws a security exeption when an online page tries to include local resources... not much you can do about it.

dougday

ASKER

hm... that's a bummer. Anyone have some ideas on how I might display a thumbnail to the user before they upload their file (without java or flash)? I know that answer's probably "no", but maybe there's something I'm overlooking.

-Doug

SOLUTION

StormyWaters

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

COBOLdinosaur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dougday

ASKER

Thanks for your comments everyone. I guess I'll have to require that my users use IE for now, and investigate possible solutions to this problem. I would love to have a Mozilla extension to accomodate this; however, IE seems to be (ever so slowly) getting their act together and making things more secure. I think I'll have an instruction sheet for those who want it to be able to disable that security feature in Mozilla. Thanks for that info StormyWaters. I think I'll have to find a more permanent fix since this functionality may even disappear in the next version of IE.

Thanks :)
-Doug

Accessing a local image dynamically from an &lt;img&gt; tag

Accessing a local image dynamically from an <img> tag