Sign In
Register
Help
Let me know if you want an example of what I mean.
Thanks.
Page 1 of 1
Thumbnail preview before image upload
Rate Topic:
#1
Phil Mossop 
- Meet Jay
-
- Group: Members
- Posts: 11,989
- Joined: 03-November 02
- Location:London, UK
-
Posted 24 August 2006 - 05:34 PM
I'm writing an image upload script in PHP. The uploading part should be fine, but I've seen some sites (like Bebo, I think) which show a preview of the image next to the upload field. How is this done, is the image uploaded, resized and shown using Javascript or is the image grabbed using Javascript?
Let me know if you want an example of what I mean.
Thanks.
Let me know if you want an example of what I mean.
Thanks.
Phil
MultiQuote
#2
Frankl.in
- Mac the planet
-
- Group: +Active Customers
- Posts: 1,491
- Joined: 28-December 02
- Location:NL
Posted 24 August 2006 - 07:20 PM
I was able to do it like this, it works in Safari, Firefox and IE6 afaik:
example
The 'onchange' on the file input runs the preview() which reads the local path to the file from the field.value and puts it into the image.src
Than you can do whatever you like with it, for example resizing by setting the image style. The width and height I defined are not so nice, but you get the idea
The display style is for non-Safari browsers that show the broken image icon when no src is defined.
example
HTML
<script>
function preview() {
field = document.getElementById( 'upload' ).value;
image = document.getElementById( 'previewIMG' );
path = 'file://'+ field;
path = path.replace(/\\/, '/'); // Fix Windows paths
image.src = path;
image.style.display = 'block';
image.style.width = "200px";
image.style.height = "150px";
}
</script>
<input type="file" name="upload" id="upload" onchange="preview()"; />
<br /><br />
<img id="previewIMG" style="display:none;" />
function preview() {
field = document.getElementById( 'upload' ).value;
image = document.getElementById( 'previewIMG' );
path = 'file://'+ field;
path = path.replace(/\\/, '/'); // Fix Windows paths
image.src = path;
image.style.display = 'block';
image.style.width = "200px";
image.style.height = "150px";
}
</script>
<input type="file" name="upload" id="upload" onchange="preview()"; />
<br /><br />
<img id="previewIMG" style="display:none;" />
The 'onchange' on the file input runs the preview() which reads the local path to the file from the field.value and puts it into the image.src
Than you can do whatever you like with it, for example resizing by setting the image style. The width and height I defined are not so nice, but you get the idea
The display style is for non-Safari browsers that show the broken image icon when no src is defined.
#3 Guest_IAIHMB_*
Posted 24 August 2006 - 09:25 PM
Not a bad concept, but it doesn't work correctly in Firefox 1.5.0.6 or Opera 9.01. There is a difference in paths:
Firefox:
file://C:/Documents and Settings\David Sissitka\My Documents\My Pictures\Desktop.bmp
Internet Explorer:
file:///C:/Documents%20and%20Settings/David%20Sissitka/My%20Documents/My%20Pictures/Desktop.bmp
Edit: Aside from the paths, it's a setting in Firefox.
Firefox:
file://C:/Documents and Settings\David Sissitka\My Documents\My Pictures\Desktop.bmp
Internet Explorer:
file:///C:/Documents%20and%20Settings/David%20Sissitka/My%20Documents/My%20Pictures/Desktop.bmp
Edit: Aside from the paths, it's a setting in Firefox.
#5 Guest_IAIHMB_*
Posted 24 August 2006 - 11:31 PM
That method is rediculously popular, after browing Google I found at least half a dozen references to it. You know what might work, using XHR to upload the selected file on change (Like Gmail does with attachments, but the content type would have to be validated.). This could be fun, I will see if I can come up with something.
#6
Brendon Koz
- Needs Hobby
-
- Group: Members
- Posts: 4,740
- Joined: 06-September 03
- Location:Saratoga Springs, NY, USA
Posted 25 August 2006 - 02:54 AM
However, if the purpose of this is an image uploading script, if you've already uploaded it and processed it on the server side to view a preview, what's the point in submitting the form?
mysiteonline.org™
They say, "Practice makes perfect," yet they also say, "Nobody's perfect"... I don't get it.
#8
Brendon Koz
- Needs Hobby
-
- Group: Members
- Posts: 4,740
- Joined: 06-September 03
- Location:Saratoga Springs, NY, USA
Posted 25 August 2006 - 03:36 AM
I can definately agree with that. However, if you use XHR to upload the image to return a thumbnail, dynamically created...you've already successfully uploaded the image in the first place.
If you can think of another method that keeps things within the realm of client-side only without the quirky browser checks, then by all means -- I'd LOVE to see what you come up with.
Otherwise, there could be a point to using a script such as this, but it wouldn't be for an image uploading script (where that is its sole purpose).
If you can think of another method that keeps things within the realm of client-side only without the quirky browser checks, then by all means -- I'd LOVE to see what you come up with.
Otherwise, there could be a point to using a script such as this, but it wouldn't be for an image uploading script (where that is its sole purpose).
mysiteonline.org™
They say, "Practice makes perfect," yet they also say, "Nobody's perfect"... I don't get it.
#9 Guest_IAIHMB_*
Posted 25 August 2006 - 04:04 AM
I understand what you're saying, I plan on taking a slightly different approach. If you're using a relatively modern browser (Firefox 1.5.0.6, Internet Explorer 6, Opera 9.01, Safari 2.0.4) you will be able to select an image to upload, if you've selected a valid image you will be able to select another image and the original will be uploaded in the background. While the image is being uploaded some sort of loading graphic will be displayed, depending on how bored I am at that point it may even display the progress. Once the image has been uploaded the loading bit will be replaced with a preview, rinse and repeat. If you're using a faeces browser you will have to deal with a regular form, but people who refuse to update are used missing out.
#10
Phil Mossop
- Meet Jay
-
- Group: Members
- Posts: 11,989
- Joined: 03-November 02
- Location:London, UK
-
Posted 29 August 2006 - 10:37 AM
Sorry for the late reply!
I'll have an experiment, but I think in the end I might just leave it if I can't find a solution that works in most major browsers. It's an interesting concept none the less. Thanks for your help.
I'll have an experiment, but I think in the end I might just leave it if I can't find a solution that works in most major browsers. It's an interesting concept none the less. Thanks for your help.
Phil
#11
ladiesduck
- IPB Newbie
-
- Group: Members
- Posts: 1
- Joined: 16-October 07
Posted 16 October 2007 - 03:14 PM
I was trying to use the code example in this post to enable a simple previewer on our College's print website. I can get it to work just fine in every instance but one. Does someone think they might be able to help me out? I will post details of the code if that is the case. Thanks.
Page 1 of 1