This article shares the specific code for implementing the JavaScript image preview function for your reference. The specific content is as follows
First, share a code for preview of js images, which is compatible with Firefox and Google Chrome
/* Case display picture preview */
$(function(){
$("#file0").bind("change",function(){
clickupLoad();
});
});
function clickupLoad(){
var imgObject = ('file0');
var getImageSrc = getFullPath(imgObject); // Local path var srcs = ([0]);
var pos = (".");
var lastname = (pos, ) // Picture suffix]
if(srcs!=""){
$("#yulan2").attr("src",srcs);
}else{
alert("Please select a picture");
}
}
function getFullPath(obj) { //Get the full path to the picture if (obj)
{
if (("MSIE") >= 1){
();
return ().text;
}else if(("Firefox") >= 1) {
if () {
return ([0]);
}
return ;
}
return ;
}
}
The example code implements the timely preview of JS uploading pictures:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image upload local preview</title>
<style type="text/css">
#preview{width:260px;height:190px;border:1px solid #000;overflow:hidden;}
#imghead {filter:progid:(sizingMethod=image);}
</style>
<script type="text/javascript">
//Picture upload preview IE uses filters. function previewImage(file)
{
var MAXWIDTH = 260;
var MAXHEIGHT = 180;
var div = ('preview');
if ( && [0])
{
='<img id=imghead>';
var img = ('imghead');
= function(){
var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, , );
= ;
= ;
// = +'px';
= +'px';
}
var reader = new FileReader();
= function(evt){ = ;}
([0]);
}
else // Compatible with IE {
var sFilter='filter:progid:(sizingMethod=scale,src="';
();
var src = ().text;
= '<img id=imghead>';
var img = ('imghead');
('').src = src;
var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, , );
status =('rect:'++','++','++','+);
= "<div id=divhead style='width:"++"px;height:"++"px;margin-top:"++"px;"+sFilter+src+"\"'></div>";
}
}
function clacImgZoomParam( maxWidth, maxHeight, width, height ){
var param = {top:0, left:0, width:width, height:height};
if( width>maxWidth || height>maxHeight )
{
rateWidth = width / maxWidth;
rateHeight = height / maxHeight;
if( rateWidth > rateHeight )
{
= maxWidth;
= (height / rateWidth);
}else
{
= (width / rateHeight);
= maxHeight;
}
}
= ((maxWidth - ) / 2);
= ((maxHeight - ) / 2);
return param;
}
</script>
</head>
<body>
<div >
<img width=100 height=100 border=0 src='<%=()%>/images/'>
</div>
<input type="file" onchange="previewImage(this)" />
</body>
</html>
The above is all about this article, I hope it will be helpful for everyone to learn JavaScript programming.