?
Solved

Javascript Image Upload - Image Preview

Posted on 2011-09-08
11
Medium Priority
?
682 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

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

WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

777 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