We generally according to IE6, IE7 development of the time to write a picture preview code is
| The code is as follows |
Copy Code |
document.getElementById ("img"). src = document.getElementById ("file"). Value;
|
Example
| The code is as follows |
Copy Code |
| <meta http-equiv= "Content-type" content= text/html; charset=gb2312 ">
<title > Picture upload </title>
<script>
Function Viewmypic (mypic,imgfile) {
if (imgfile.value) {
Mypic.s Rc=imgfile.value;
mypic.style.display= "";
Mypic.border=1;
}
</script> <body>
<center>
<form >
<in Put name= "Imgfile" type= "file" id= "Imgfile" size= "" onchange= "Viewmypic (showimg,this.form.imgfile);"/>
< br/>
</form>
&l t;br/>
</div>
<div style= "Display:none" >
</div>
</center>
</BODY&G T
|
Direct user controls on IE8 and Firefox. Value gets only the file name rather than the full path
We're going to need some sort of judgment operation.
| The code is as follows |
Copy Code |
var Isie = (document.all)? True:false;
var isIE7 = Isie && (navigator.userAgent.indexOf (' MSIE 7.0 ')!=-1);
var isIE8 = Isie && (navigator.userAgent.indexOf (' MSIE 8.0 ')!=-1);
var file = document.getElementById ("file");
if (isIE7 | | isIE8) {
File.select ();
img = Document.selection.createRange (). text;
Document.selection.empty ();
document.getElementById ("img"). src = img;
} |
All right, let's give you a preview of a compatible IE, Chrome, Firefox upload image.
| The code is as follows |
Copy Code |
|
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Local picture Preview </title>
<style type= "Text/css" >
#preview {width:100px;height:100px;border:1px solid #000; overflow:hidden;}
#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingmethod=image);}
</style>
<script type= "Text/javascript" >
function Previewimage (file)
{
var maxwidth = 100;
var maxheight = 100;
var div = document.getElementById (' preview ');
if (File.files && file.files[0])
{
div.innerhtml = ' ';
var img = document.getElementById (' Imghead ');
Img.onload = function () {
var rect = Clacimgzoomparam (MaxWidth, MaxHeight, Img.offsetwidth, img.offsetheight);
Img.width = Rect.width;
Img.height = Rect.height;
Img.style.marginLeft = rect.left+ ' px ';
Img.style.marginTop = rect.top+ ' px ';
}
var reader = new FileReader ();
Reader.onload = function (evt) {img.src = Evt.target.result;}
Reader.readasdataurl (File.files[0]);
}
Else
{
var sfilter= ' Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingmethod=scale,src= ";
File.select ();
var src = document.selection.createRange (). text;
div.innerhtml = ' ';
var img = document.getElementById (' Imghead ');
Img.filters.item (' DXImageTransform.Microsoft.AlphaImageLoader '). src = src;
var rect = Clacimgzoomparam (MaxWidth, MaxHeight, Img.offsetwidth, img.offsetheight);
Status = (' rect: ' +rect.top+ ', ' +rect.left+ ', ' +rect.width+ ', ' +rect.height ');
div.innerhtml = "<div id=divhead style= ' width: +rect.width+" px;height: "+rect.height+" Px;margin-top: "+rect.top+" Px;margin-left: "+rect.left+" 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)
{
Param.width = MaxWidth;
Param.height = Math.Round (height/ratewidth);
}else
{
Param.width = Math.Round (width/rateheight);
Param.height = MaxHeight;
}
}
Param.left = Math.Round ((maxwidth-param.width)/2);
Param.top = Math.Round ((maxheight-param.height)/2);
return param;
}
</script>
<body>
<div id= "Preview" >
</div>
<br/>
<input type= "File" onchange= "Previewimage (This)"/>
</body>
|
