Solved

Javascript Image Upload - Image Preview

Posted on 2011-09-08
11
665 Views
Last Modified: 2012-05-12
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
Comment
Question by:garethtnash
  • 4
  • 4
  • 3
11 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 36501658
>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
 
LVL 82

Expert Comment

by:leakim971
ID: 36501659
0
 

Author Comment

by:garethtnash
ID: 36501667
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
 
LVL 82

Expert Comment

by:leakim971
ID: 36501706
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
 

Author Comment

by:garethtnash
ID: 36502408
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 82

Expert Comment

by:hielo
ID: 36502787
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
 
LVL 82

Expert Comment

by:leakim971
ID: 36502929
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
 
LVL 82

Expert Comment

by:hielo
ID: 36503017
@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
 

Author Comment

by:garethtnash
ID: 36503079
Thanks both, i guess this is an idea for the bin then?
0
 
LVL 82

Accepted Solution

by:
hielo earned 500 total points
ID: 36503268
>>, 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
 

Author Closing Comment

by:garethtnash
ID: 36521918
Thank you
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Form Processing in PHP 11 30
Angular - "nest" service calls? 18 21
Angular- typeahead works but need to change 2 things 5 17
Message not shown 5 27
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

929 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now