|
<! 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> image upload Local preview </title>
<script src= '/jquery-1.4.2.js ' ></script>
<style type= "Text/css" >
#preview {width:260px;height:190px;border:1px solid #000; overflow:hidden;}
. imghead {Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingmethod=image);}
</style>
<script type= "Text/javascript" >
Image upload Preview IE is using a filter.
function Previewimage (file)
{
var maxwidth = 260;
var maxheight = 180;
var div =$ (' #preview ');
Get the length of the photo
$photolength =$ (': Input[name^=photo] '). length;
if (File.files && file.files[0])
{//alert (file.name);
div.innerhtml = ' ';
var img = $ (' #imghead ' + $photolength);
Alert (img.attr (' id '));
Img.load = function () {
var rect = Clacimgzoomparam (MaxWidth, MaxHeight, Img.offsetwidth, img.offsetheight);
Img[0].width = Rect.width;
Img[0].height = Rect.height;
Img.style.marginLeft = rect.left+ ' px ';
Img[0].style.margintop = rect.top+ ' px ';
}
var reader = new FileReader ();
Reader.onload = function (evt) {img[0].src = Evt.target.result;}
Reader.readasdataurl (File.files[0]);
Hide the current upload button to display a new button
$ (file). Hide ();
$ (file). After ("<input type= ' file ' name= ' photo[] ' onchange= ' previewimage (this) '/>");
}
else//compatible IE
{
var sfilter= ' Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingmethod=scale,src= ";
File.select ();
File.blur ();
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; " +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>
<form action= '/home_upload ' method= ' post ' enctype= ' Multipart/form-data ' >
<div id= "Preview" >
</div>
<input type= "file" Name= ' photo[] ' onchange= ' previewimage (this)/>
<input type= ' Submit ' value= ' submitted '/>
</form>
</body>
|
