[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 690
  • Last Modified:

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 -

<!-- 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 -->

Open in new window


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>

Open in new window


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>

Open in new window


Appreciate your help - thank you
0
garethtnash
Asked:
garethtnash
  • 4
  • 4
  • 3
1 Solution
 
leakim971PluritechnicianCommented:
>This currently uses a spacer image as the default, it it not possible to have - no image?
<img alt="Graphic will preview here" id="picField" src="spacer.gif">

Replace spacer.gif by no_image_4.gif
0
 
leakim971PluritechnicianCommented:
0
 
garethtnashAuthor Commented:
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
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
leakim971PluritechnicianCommented:
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
0
 
garethtnashAuthor Commented:
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
0
 
hieloCommented:
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>

Open in new window

0
 
leakim971PluritechnicianCommented:
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
0
 
hieloCommented:
@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.
0
 
garethtnashAuthor Commented:
Thanks both, i guess this is an idea for the bin then?
0
 
hieloCommented:
>>, i guess this is an idea for the bin then?
Why the "idea"? There's no problem with the idea. The problem is cross-browser compatability with the SCRIPT
you found.  If you are working on an intranet where IE if your primary supported browser, then the above will suit your needs, but for the general public where you are most likely targeting cross-browser support, then you need to handle file uploads on the server.

You may want to look into:
http://www.uploadify.com/

It uses flash "helper file" for the preview though.
0
 
garethtnashAuthor Commented:
Thank you
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

  • 4
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now