»
AnglaisFrançaisVietnamien

Imprimer - Image prévisualiseur - JavaScriptBank.com

Version complète: jsB@nk » Image » Visualiseur d'images » Image prévisualiseur
URL: https://www.javascriptbank.com/image-previewer.html

Image prévisualiseur © JavaScriptBank.comCet JavaScript est destiné à des formes où l'utilisateur doit télécharger un image à un site Web. Le image est affiché sur la page pour afficher un aperçu avant le transfert. L'affichage sera redimensionnée si nécessaire afin de ne pas rompre la mise en page. Types de fichiers sont définis dans le script, d'autres seront rejetées. Fonctionne uniquement dans Internet Explorer, mais dégrade gracieusement.

Version complète: jsB@nk » Image » Visualiseur d'images » Image prévisualiseur
URL: https://www.javascriptbank.com/image-previewer.html



JavaScript
<script type="text/javascript"><!-- Begin/*Created by: Abraham Joffe :: http://www.abrahamjoffe.com.au/ *//***** CUSTOMIZE THESE VARIABLES *****/  // width to resize large images tovar maxWidth=100;  // height to resize large images tovar maxHeight=100;  // valid file typesvar fileTypes=["bmp","gif","png","jpg","jpeg"];  // the id of the preview image tagvar outImage="previewField";  // what to display when the image is not validvar 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><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<b>Test it by locating a valid file on your hard drive:</b><br><input type="file" id="picField" onchange="preview(this)"><br><img alt="Graphic will preview here" id="previewField" src="logojs.gif"><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->