Solved

Javascript Image Upload - Image Preview

Posted on 2011-09-08
11
663 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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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…

762 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

19 Experts available now in Live!

Get 1:1 Help Now