Javascript Image Upload - Image Preview
Hello,
I could do with a little Javascript help please, I found a script that creates a preview of the image file uploaded once the upload has suceeded.... Only it doesn't work.
To be more precise my form has 6 file fields on it (I've only tested against one so far) And I want to run the script for each file upload.
I've encompassed my file fields in a table (I know) with three columns -
1 Label
2 Image (If there)
3 file field
I only want to show (2) if a file has been uploaded.....
The Javacript I found is -
I'm calling the javacript action like -
This currently uses a spacer image as the default, it it not possible to have - no image?
So for my 6 uploads my code looks like -
Appreciate your help - thank you
I could do with a little Javascript help please, I found a script that creates a preview of the image file uploaded once the upload has suceeded.... Only it doesn't work.
To be more precise my form has 6 file fields on it (I've only tested against one so far) And I want to run the script for each file upload.
I've encompassed my file fields in a table (I know) with three columns -
1 Label
2 Image (If there)
3 file field
I only want to show (2) if a file has been uploaded.....
The Javacript I found is -
<!-- Begin
// width to resize large images to
var maxWidth=66;
// height to resize large images to
var maxHeight=66;
// valid file types
var fileTypes=["bmp","gif","png","jpg","jpeg"];
// the id of the preview image tag
var outImage="previewField";
// what to display when the image is not valid
var defaultPic="spacer.gif";
/***** DO NOT EDIT BELOW *****/
function preview(what){
var source=what.value;
var ext=source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase();
for (var i=0; i<fileTypes.length; i++) if (fileTypes[i]==ext) break;
globalPic=new Image();
if (i<fileTypes.length) globalPic.src=source;
else {
globalPic.src=defaultPic;
alert("THAT IS NOT A VALID IMAGE\nPlease load an image with an extention of one of the following:\n\n"+fileTypes.join(", "));
}
setTimeout("applyChanges()",200);
}
var globalPic;
function applyChanges(){
var field=document.getElementById(outImage);
var x=parseInt(globalPic.width);
var y=parseInt(globalPic.height);
if (x>maxWidth) {
y*=maxWidth/x;
x=maxWidth;
}
if (y>maxHeight) {
x*=maxHeight/y;
y=maxHeight;
}
field.style.display=(x<1 || y<1)?"none":"";
field.src=globalPic.src;
field.width=x;
field.height=y;
}
// End -->I'm calling the javacript action like -
<tr>
<td class="fixedleftwidth">Main Image <span class="asterix">*</span></td>
<td class="img-preview-column"><img alt="Graphic will preview here" id="picField" src="spacer.gif"></td>
<td><input type="file" name="image1" id="image1" onchange="preview(this)"/></td>
</tr>This currently uses a spacer image as the default, it it not possible to have - no image?
So for my 6 uploads my code looks like -
<table border="0" cellspacing="0" cellpadding="0" class="newproducttable">
<tr>
<td class="fixedleftwidth">Main Image <span class="asterix">*</span></td>
<td class="img-preview-column"><img alt="Graphic will preview here" id="picField" src="spacer.gif"></td>
<td><input type="file" name="image1" id="image1" onchange="preview(this)"/></td>
</tr>
<tr class="alternativerowtr">
<td class="fixedleftwidth">Second Image (Optional)</td>
<td class="img-preview-column"><img alt="Graphic will preview here" id="picField2" src="spacer.gif" /></td>
<td><input type="file" name="image2" id="image2" /></td>
</tr>
<tr>
<td class="fixedleftwidth">Third Image (Optional)</td>
<td class="img-preview-column"><img alt="Graphic will preview here" id="picField3" src="spacer.gif" /></td>
<td><input type="file" name="image3" id="image3" /></td>
</tr>
<tr class="alternativerowtr">
<td class="fixedleftwidth">Fourth Image (Optional)</td>
<td class="img-preview-column"><img alt="Graphic will preview here" id="picField4" src="spacer.gif" /></td>
<td><input type="file" name="image4" id="image4" /></td>
</tr>
<tr>
<td class="fixedleftwidth">Fifth Image (Optional)</td>
<td class="img-preview-column"><img alt="Graphic will preview here" id="picField5" src="spacer.gif" /></td>
<td><input type="file" name="image5" id="image5" /></td>
</tr>
<tr class="alternativerowtr">
<td class="fixedleftwidth">Sixth Image (Optional)</td>
<td class="img-preview-column"><img alt="Graphic will preview here" id="picField6" src="spacer.gif" /></td>
<td><input type="file" name="image6" id="image6" /></td>
</tr>
</table>Appreciate your help - thank you
ASKER
Hello Again :)
Like the jsfiddle resource :)
Tried loading a file in Main Image filefield, but I still see the No image available graphic?
Haven't got a clue where to start with this?
Thank you
Like the jsfiddle resource :)
Tried loading a file in Main Image filefield, but I still see the No image available graphic?
Haven't got a clue where to start with this?
Thank you
I suppose you don't want flash and have the preview before uploading the image?
if yes, there's no solution to this problem until you want a solution for a specific browser or accept a third party technology :
- IE+ActiveX
- FF+addon
- Any browsers+AdobFlash
- Any browsers+Applet
if yes, there's no solution to this problem until you want a solution for a specific browser or accept a third party technology :
- IE+ActiveX
- FF+addon
- Any browsers+AdobFlash
- Any browsers+Applet
ASKER
Hi, I was hoping to do this in javacript,. is there a better option? if so can you point me in the right direction..
Thank you
Thank you
try:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css"><!--
#picField,#picField1,#picField2,#picField3,#picField4,#picField5,#picField6 {
width:64px;
}
.hideMe{display:none;}
-->
</style>
<script type="text/javascript"><!-- Begin
// width to resize large images to
var maxWidth=66;
// height to resize large images to
var maxHeight=66;
// valid file types
var fileTypes=["bmp","gif","png","jpg","jpeg"];
// the id of the preview image tag
var outImage="previewField";
// what to display when the image is not valid
var defaultPic="spacer.gif";
/***** DO NOT EDIT BELOW *****/
var globalPic;
function preview(what){
var source=what.value;
var ext=source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase();
for (var i=0; i<fileTypes.length; i++) if (fileTypes[i]==ext) break;
globalPic=new Image();
if (i<fileTypes.length) globalPic.src=source;
else {
globalPic.src=defaultPic;
alert("THAT IS NOT A VALID IMAGE\nPlease load an image with an extention of one of the following:\n\n"+fileTypes.join(", "));
}
outImage='picField'+what.id.replace(/\D/g,'');
setTimeout("applyChanges('"+outImage+"')",200);
}
function applyChanges(outImage){
var field=document.getElementById(outImage);
var x=parseInt(globalPic.width);
var y=parseInt(globalPic.height);
if (x>maxWidth) {
y*=maxWidth/x;
x=maxWidth;
}
if (y>maxHeight) {
x*=maxHeight/y;
y=maxHeight;
}
field.style.display=(x<1 || y<1)?"none":"";
field.src=globalPic.src;
field.width=x;
field.height=y;
document.getElementById(outImage).className="";
}
// End -->
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" class="newproducttable">
<tr>
<td class="fixedleftwidth">Main Image <span class="asterix">*</span></td>
<td class="img-preview-column"><img alt="Graphic will preview here" id="picField1" src="#" class="hideMe"></td>
<td><input type="file" name="image1" id="image1" onchange="preview(this)"/></td>
</tr>
<tr class="alternativerowtr">
<td class="fixedleftwidth">Second Image (Optional)</td>
<td class="img-preview-column"><img alt="Graphic will preview here" id="picField2" src="#" class="hideMe" /></td>
<td><input type="file" name="image2" id="image2" onchange="preview(this)"/></td>
</tr>
<tr>
<td class="fixedleftwidth">Third Image (Optional)</td>
<td class="img-preview-column"><img alt="Graphic will preview here" id="picField3" src="#" class="hideMe" /></td>
<td><input type="file" name="image3" id="image3" onchange="preview(this)"/></td>
</tr>
<tr class="alternativerowtr">
<td class="fixedleftwidth">Fourth Image (Optional)</td>
<td class="img-preview-column"><img alt="Graphic will preview here" id="picField4" src="#" class="hideMe" /></td>
<td><input type="file" name="image4" id="image4" onchange="preview(this)"/></td>
</tr>
<tr>
<td class="fixedleftwidth">Fifth Image (Optional)</td>
<td class="img-preview-column"><img alt="Graphic will preview here" id="picField5" src="#" class="hideMe" /></td>
<td><input type="file" name="image5" id="image5" onchange="preview(this)"/></td>
</tr>
<tr class="alternativerowtr">
<td class="fixedleftwidth">Sixth Image (Optional)</td>
<td class="img-preview-column"><img alt="Graphic will preview here" id="picField6" src="#" class="hideMe" /></td>
<td><input type="file" name="image6" id="image6" onchange="preview(this)"/></td>
</tr>
</table>
</body>
</html>
You need to upload the file before having the preview
Applet, ActiveX, Flash (with Javascript or not) allow you to have the preview without uploading first
Applet, ActiveX, Flash (with Javascript or not) allow you to have the preview without uploading first
@garethtnash:
I don't know where you got that script from, but I hope it was stated clearly that it was meant just for IE. For other browsers you will need to upload the image first.
>>You need to upload the file before having the preview
The above works fine for IE because I provides the full path to the image file instead of just the filename.
I don't know where you got that script from, but I hope it was stated clearly that it was meant just for IE. For other browsers you will need to upload the image first.
>>You need to upload the file before having the preview
The above works fine for IE because I provides the full path to the image file instead of just the filename.
ASKER
Thanks both, i guess this is an idea for the bin then?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you
<img alt="Graphic will preview here" id="picField" src="spacer.gif">
Replace spacer.gif by no_image_4.gif