Closed Thread Icon

Topic awaiting preservation: Dynamic image upload preview (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=26515" title="Pages that link to Topic awaiting preservation: Dynamic image upload preview (Page 1 of 1)" rel="nofollow" >Topic awaiting preservation: Dynamic image upload preview <span class="small">(Page 1 of 1)</span>\
 
robur
Nervous Wreck (II) Inmate

From: Careywood, Idaho, USA
Insane since: Jan 2005

 posted posted 08-23-2005 17:17

Hello Everyone!

Today I am working on a dynamic image upload preview.

I am sure you are all familiar with the upload form element.
I am trying to take it to the next level: show a preview of the image before uploading!

So Far, I have got it working in Safarri, but not in FireFox (and I don't know about IE since i'm on a Mac).
I was hoping that someone with more JS knowledge than me might be able to figure out why it wont work.
The Code can be found below:

code:
<td class="even">Photos:
                  <td class="odd" valign="top">
				  <script type="text/javascript">
					function updatePreviewImage(num) {
						file = document.getElementById('pic'+num);
						image = document['previewImage'+num];
						image.src = 'file://' + file.value;
						image.width = 100;
						image.height = 75;
						return true;
					}
					</script>
				  <b>Image Files:</b><br /><br />

				  <ol>
                        <li>
                          <input name="pic0" id="pic0" type="file" value="" onChange="updatePreviewImage(0);"  /></li>
                        <li>
                          <input name="pic1" id="pic1" type="file" value="" onChange="updatePreviewImage(1);" /></li>
                        <li>
                          <input name="pic2" id="pic2" type="file" value="" onChange="updatePreviewImage(2);" />
                        </li>
                        <li>

                          <input name="pic3" id="pic3" type="file" value="" onChange="updatePreviewImage(3);" />
                        </li>
                        <li>
                          <input name="pic4" id="pic4" type="file" value="" onChange="updatePreviewImage(4);" />
                        </li>
                        <li>
                          <input name="pic5" id="pic5" type="file" value="" onChange="updatePreviewImage(5);" />
                        </li>
                        <li>

                          <input name="pic6" id="pic6" type="file" value="" onChange="updatePrevi
						  ewImage(6);" />
                        </li>
                        <li>
                          <input name="pic7" id="pic7" type="file" value="" onChange="updatePreviewImage(7);" />
                        </li>
                        <li>
                          <input name="pic8" id="pic8" type="file" value="" onChange="updatePreviewImage(8);" />
                        </li>
                        <li>

                          <input name="pic9" id="pic9" type="file" value="" onChange="updatePreviewImage(9);" />
                        </li>
                      </ol>
					  <em></em>
                     </td>
  					<td valign="top" class="odd"><b>Image Previews:</b><br /><br /><div style="width:100px; height:90px; float:left; text-align:center;"><em>Photo 1:</em><br /><img name="previewImage0" src="/images/iconNoImage.png"></div><div style="width:100px; height:90px; float:left; text-align:center;"><em>Photo 2:</em><br /><img name="previewImage1" src="/images/iconNoImage.png"></div><div style="width:100px; height:90px; float:left; text-align:center;"><em>Photo 3:</em><br /><img name="previewImage2" src="/images/iconNoImage.png"></div><div style="width:100px; height:90px; float:left; text-align:center;"><em>Photo 4:</em><br /><img name="previewImage3" src="/images/iconNoImage.png"></div><div style="width:100px; height:90px; float:left; text-align:center;"><em>Photo 5:</em><br /><img name="previewImage4" src="/images/iconNoImage.png"></div><div style="width:100px; height:90px; float:left; text-align:center;"><em>Photo 6:</em><br /><img name="previewImage5" src="/images/iconNoImage.png"></div><div style="width:100px; height:90px; float:left; text-align:center;"><em>Photo 7:</em><br /><img name="previewImage6" src="/images/iconNoImage.png"></div><div style="width:100px; height:90px; float:left; text-align:center;"><em>Photo 8:</em><br /><img name="previewImage7" src="/images/iconNoImage.png"></div><div style="width:100px; height:90px; float:left; text-align:center;"><em>Photo 9:</em><br /><img name="previewImage8" src="/images/iconNoImage.png"></div><div style="width:100px; height:90px; float:left; text-align:center;"><em>Photo 10:</em><br /><img name="previewImage9" src="/images/iconNoImage.png"></div></td>

				</tr>



Sorry about all the table stuff, but I copied it straight out of my site's code.

The (half working) preview can be found on my classifieds website at:
http://safarri.com/submit-step-2-cat-99.ati
It will ask you to login, but just enter test as the username and password.

Thank You Everyone,

-Robur

P.S. I added a really cool css menu/toolbar to my site, and wanted to know how it looks in IE.
If anyone could send me a screenshot, it would be great!
http://safarri.com
Moobie
Bipolar (III) Inmate

From: UK
Insane since: Jul 2005

 posted posted 08-23-2005 19:21

That's quite cool in a way.

It works ok in IE6, but Firefox says:

code:
Security Error: Content at http://safarri.com/submit-step-2-cat-99.ati may not load or link to file:///C:%5CDocuments%20and%20Settings%5CBlah%5CDesktop%5Cblah.gif.



I think I can see its point, surely you could have all sorts of fun confusing users with this sort of thing?
robur
Nervous Wreck (II) Inmate

From: Careywood, Idaho, USA
Insane since: Jan 2005

 posted posted 08-23-2005 19:46

Thanks for telling me that it works in IE. That is a very important point!

Now, why does FireFox think that a picture is a security error?

How does it confuse users?

-Robur

(Edited by robur on 08-23-2005 19:48)
DmS
Maniac (V) Inmate

From: Sthlm, Sweden
Insane since: Oct 2000

 posted posted 08-23-2005 20:31

I've done that before and there should be no problem with security errors... On the other hand FF did not exist when I did it...
I basically did it the way you do, grab the path from the upload field and use it as a path in an img-tag. I combined it with making the thumb a link to the original large file.

Something like this (long time ago and just a part of it all)

code:
data = document.frmSave.fileSave.value;
//imgPos holds which image to replace with the new path, orig it's a 1x1px transp gif
document.images[imgPos].src = data;
//imgLink holds which link should link to the new image
document.links[imgLink].href = data;



I never got any warnings with this principle but my guess is that FF checks if the images is loaded from the same domain or something to preserve integrity/security.
IMHO it should work though... But as you say it doesnt' work in FF on Mac.

Hm. Just tested locally with my old app, nope, the preview works in safari, but not in FF, probably the same type of error but I'm only getting errors from your page, not locally with my code.

So, no solutions from me at this point, sorry... But I like the functionality
/Dan

{cell 260} {Blog}
-{Proudly running OSX, Debian, WXP, W98, well not so proudly on the last 2...}-
-{ ?There are two major products that come out of Berkeley: LSD and UNIX. We don't believe this to be a coincidence. - Jeremy S. Anderson" }-
-{"Light travels faster than sound. This is why some people appear bright until you hear them speak.?}-
robur
Nervous Wreck (II) Inmate

From: Careywood, Idaho, USA
Insane since: Jan 2005

 posted posted 08-23-2005 21:34

DMS:

I would have to agree with you.
I found a prefrence in FireFox that says something like "allow javascript to change images". It is checked by default, but it's presence suggests that the designers were more security concious than internet explorers.

Firefox allows you to load files off your harddrive no problem, but I guess that they thought that letting JavaScript load files off your harddrive was a security threat (which I would have to agree with).

At least it works in IE, (finally, a bug that helps!) :-)

I am actually doing all the image processing on my server after the image is uploaded, so splitting the image in the javascript wouldn't really help anything.

Thanks for your post,

-Robur

P.S. If possible, could someone send me a screenshot of Safarri in IE? (I'me just curious to know what it looks like)
robur
Nervous Wreck (II) Inmate

From: Careywood, Idaho, USA
Insane since: Jan 2005

 posted posted 09-21-2005 02:28

Sorry for the length of time since my last post.
As usual, my attention was distracted by some other incredibly cool features i was adding :-)

I am posting to say that this issue has been resolved in what I believe to be the most elegant manner possible given the circumstances.
Please see the (now working) model at:
http://safarri.com/submit-step-3-cat-100-anonymous-true.ati

If you want clarification on how it works now, just ask!

Thanks for your suggestions,

-Robur

(Edited by robur on 09-21-2005 02:40)

« Backwards — Onwards »

Show Forum Drop Down Menu