Solved

Javascript Image Upload - Image Preview

Posted on 2011-09-08
11
667 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
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

816 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

7 Experts available now in Live!

Get 1:1 Help Now