Image preview script
Posted Jan 14, 2005 in JavaScript.
I want to write an image upload script that allows a JavaScript preview of the image before the upload takes place. I've never played around with file uploading before, so I wrote a little test script to see how an image preview might work:
<script type="text/javascript">
function setImage(string) {
document.getElementById('prevImage').src = 'File:\/\/' + string;
}
</script>
<form>
<input type="file" name="myImage" onchange="setImage(this.value);" />
</form>
<img id="prevImage" />
It works just fine in Internet Explorer, but it fails on other browsers I have checked. I did a little bit of Googling, and I discovered that JavaScript isn't supposed to be able to access the local file system. It appears to be another one of those times when IE helpfully gets it wrong.
Is there a way to make this work without resorting to server-side scripting?
Comments
Like you said, Javascript isn't supposed to be able to access the client's filesystem (security hole). You can always count on IE to implement the wrong thing right... I think the only way to accomplish this preview, without server-size scripting, would probably be some sort of Active X control... in which case you're treading into muddy water in terms of standards / cross-browser compatibility...
Posted by Alex Katechis on Jan 13, 2005.
I suppose the only way left open to me is to have the user submit a form to get an image preview.
Posted by Simon Jessey on Jan 14, 2005.
You have it wrong, because you have to add there complete address. That means + file://localhost/ . But it will still work just in Opera and IE, because in Gecko its not possible to call onchange with input type file. So this will works in all (offline, about online I am not quiet sure)
<script type="text/javascript">
function setImage() {
xxx='file://localhost/' + document.getElementById('file').value
var img=document.createElement('img');
img.setAttribute('src',xxx);
document.getElementById('prevImage').appendChild(img)
}
</script>
<input type="file" id="file" />
<input type="button" value="preview" onclick="setImage();" />
<div id="prevImage"></div>
Posted by Fred on Jan 14, 2005.
Because it is working online as far as I tested it now, you should add two lines for safety reason. Final code is like this one (not works in Opera online) This will works in IE and Gecko based browsers
<script type="text/javascript">
function setImage() {
xxx='file://localhost/' + document.getElementById('file').value;
xxx=xxx.toLowerCase();
if (xxx.substring(0,xxx.lastIndexOf('.png'))||xxx.substring(0,xxx.lastIndexOf('.jpg'))||xxx.substring(0,xxx.lastIndexOf('.jpeg'))||xxx.substring(0,xxx.lastIndexOf('.gif'))){
var img=document.createElement('img');
img.setAttribute('src',xxx);
document.getElementById('prevImage').appendChild(img);
}}
</script>
<input type="file" id="file" />
<input type="button" value="preview" onclick="setImage();" />
<div id="prevImage"></div>
Posted by Fred on Jan 14, 2005.
I can only get your scripts to work in IE, Fred. I think I'm just unlucky!
Posted by Simon Jessey on Jan 14, 2005.
OK on my system it works (in Firebird 0.7,Firefox 1.0,Opera 8.0. K-meleon 0.7, Mozilla 1.6, Maxthon and so on) but it could be different on other OS. I am not sure now about Linux and Mac because there is probably another address of images on localhost. So to persuade to work this in all, this : file://localhost/ has to be replaced for each OS with apropriate string. It is written on start of address in address line when you open for example image in Mozilla on win it is this adddress on my destktop file:///C:/Documents%20and%20Settings/Administrator.ALBERT/Plocha/mail.png
in Opera with this file://localhost/....... Sorry for my English. Am I right, that you use differerent OS than win or not ?
Posted by Fred on Jan 15, 2005.
I'm using Windows XP Professional, Fred. But any script I use will need to work on all operating systems and browsers. I'll probably have to go the submit-to-preview route.
Posted by Simon Jessey on Jan 15, 2005.
??? Normaly working http://xy.wz.cz/setimg.php Win xp pro xhtml1.1 + application/xhtml+xml
Posted by Fred on Jan 16, 2005.
Sorry, Fred. It is not working for me on Firefox 1.0/Windows XP Professional.
Posted by Simon Jessey on Jan 16, 2005.
On my Firefox 1.0 xp pro it is working. There is a possibility in Preferences-webpages- allow javascript-advanced-change pictures ?? Have you this allowed ??
Posted by Fred on Jan 17, 2005.
I do have that checked. Thank you for your help, Fred. I'll do it another way.
Posted by Simon Jessey on Jan 17, 2005.
I had been trying this for awhile and your script helped me figure out where I was going wrong with it. I've tested it in Firefox 1.0 and IE and it's worked, so that's good enough. I just put a disclaimer saying "Preview may not appear on certain browsers."
Anyway.. thanks.
Posted by Colin on Feb 02, 2005.