preview image pics before upload javascript

  • HOME  • tutorials  • photos   • free grafics design    • questions and answers  • distance calculator  • maps
   



CATEGORIES
EXCEL TUTORIAL
SQL TUTORIAL
WEB INFORMATION
WINDOWS
JAVASCRIPT SCRIPTS
COMPUTER SECURITY
GRAFIC DESIGN
HTML
PHP
CSS STYLE
ATLAS OF THE WORLD
DEVELOPER
PHOTOSHOP
MAGAZINE
TOP LISTS
LATEST ARTICLES
md5 hash generator online tools windows linux c php
remove duplicates in html lines online javascript
documentgetelementbyid()innerhtml javascript set example
how to block processes from starting and running in windows xp
list of us american presidents with pictures
ucwords javascript convert online tool
hex to rgb converter javascript for colors online
letter-spacing css property for html pages
sql inject protection without complicated class php script and tutorial
how to insert decimal values into a sql table row
  home   JAVASCRIPT SCRIPTS » PREVIEW IMAGE PICS BEFORE UPLOAD JAVASCRIPT
google ads
 
 
 

PREVIEW IMAGE PICS BEFORE UPLOAD JAVASCRIPT


Views: 466
Preview image pics before upload javascript



  It can be very useful to preview an image before uploading, because you can to see wich one you chose it.
Here are two javascript script. Working just in IE because the Firefox has a security action that stop local files previews.

code script:

<script type="text/javascript">
function showImage(str)
{
    document.body.innerHTML+='<br>Uploaded image path: <samp>'+str+'</samp><br><img src="'+str+'" height="100" width="150" alt="">';
}
</script>
<input type="file" id="MainImage" onChange="showImage(this.value)">



Here is the first example : ( look at the bottom of the page )



code script:

<script type="text/javascript">

var maxWidth=100;
  // height to resize large images to
var maxHeight=100;
  // 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 -->
</script>

 

 

 

<center> Pre-veiw pic from your drive </center>
<div align="center" style="line-height: 1.9em;">

<br>
<input name="userfile" type="file" id="picField" onchange="preview(this)" >


      <br><img id="previewField" alt="" name="previewField" width="1" border="2" height="1" >

 


And here is the second example:

Preveiw image from your drive





Articles related to PREVIEW IMAGE PICS BEFORE UPLOAD JAVASCRIPT
Zero result!

Tags:Preview image pics before upload,show image before upload,see image before upload,




Leave a comment

Your name *
Your comment *
   Anti Spam code *

3 comments

added by: DIOGO date: 03-02-10

Legal o script mais uma pergunta por que não funciona no php.???



added by: Alex Beemer date: 04-11-10

so when trying this in firefox it doesnt work and says that the path to my file is simply images.jpg, but other browsers give the whole c:/documents...images/image.jpg

added by: BUDHA date: 28-01-11

 This code is perfectly working in the internet explorer 6 and older but it is not working in new version like google chrome  and IE 7 and newer.




the latest articles:
• MD5 hash generator Online tools Windows Linux C Php
• Remove duplicates in html lines online javascript
• documentgetElementById()innerHTML javascript set Example
• How to block processes from starting and running in Windows XP
• List of us american presidents with pictures
• Ucwords javascript convert online tool
• Hex to rgb converter javascript for colors online
• Letter-spacing CSS property for html pages
• SQL Inject protection without complicated class php script and tutorial
• How to insert decimal values into a SQL table row
what is the height of statue of liberty
hollywood movies
map from faisalabad to hasilpur pakistan
driving distance between tanga and bagamoyo
how to abbreviate million dollars
how long do butterflies live in captivity

 

eXTReMe Tracker