The JS section is like this:
Copy Code code as follows:
Picture Upload Preview Plugin ************************
Author: iddqd (2009-07-01)
Email:iddqd5376@163.com
Http://blog.sina.com.cn/iddqd
Version: 1.0
Description: Picture upload Preview Plugin
When uploading, you can generate a proportional scaling chart with a fixed width and height range.
Parameter settings:
Width store picture fixed size container wide
Height store picture height of fixed size container
Imgdiv Page Div's jquery ID
Imgtype array suffix name
Picture Upload Preview Plugin *************************
(function ($) {
JQuery.fn.extend ({
Uploadpreview:function (opts) {
opts = Jquery.extend ({
width:0,
height:0,
Imgdiv: "#imgDiv",
Imgtype: ["gif", "JPEG", "JPG", "BMP", "PNG"],
Callback:function () {return false;}
}, opts | | {});
var _self = this;
var _this = $ (this);
var Imgdiv = $ (opts.imgdiv);
Imgdiv.width (Opts.width);
Imgdiv.height (Opts.height);
autoscaling = function () {
if ($.browser.version = = "7.0" | | | $.browser.version = = "8.0") imgdiv.get (0). Filters.item (" DXImageTransform.Microsoft.AlphaImageLoader "). Sizingmethod =" image ";
var img_width = Imgdiv.width ();
var img_height = Imgdiv.height ();
if (img_width > 0 && img_height > 0) {
var rate = (Opts.width/img_width < opts.height/img_height)? Opts.width/img_width:opts.height/img_height;
if (rate <= 1) {
if ($.browser.version = = "7.0" | | | $.browser.version = = "8.0") imgdiv.get (0). Filters.item (" DXImageTransform.Microsoft.AlphaImageLoader "). Sizingmethod =" scale ";
Imgdiv.width (Img_width * rate);
Imgdiv.height (Img_height * rate);
} else {
Imgdiv.width (Img_width);
Imgdiv.height (Img_height);
}
var left = (Opts.width-imgdiv.width ()) * 0.5;
var top = (Opts.height-imgdiv.height ()) * 0.5;
Imgdiv.css ({"Margin-left": Left, "Margin-top": Top});
Imgdiv.show ();
}
}
_this.change (function () {
if (this.value) {
if (! REGEXP ("\. (" + Opts.imgType.join ("|") + ") $", "I"). Test (This.value.toLowerCase ()) {
Alert ("Picture type must be" + opts.imgType.join (",") + "one of");
This.value = "";
return false;
}
Imgdiv.hide ();
if ($.browser.msie) {
if ($.browser.version = = "6.0") {
var img = $ ("Imgdiv.replacewith (IMG);
Imgdiv = img;
var image = new Image ();
IMAGE.SRC = ' file:///' + this.value;
Imgdiv.attr (' src ', image.src);
AutoScaling ();
}
else {
Imgdiv.css ({filter: "Progid:DXImageTransform.Microsoft.AlphaImageLoader (Sizingmethod=image)"});
Imgdiv.get (0). Filters.item ("DXImageTransform.Microsoft.AlphaImageLoader"). Sizingmethod = "image";
try {
Imgdiv.get (0). Filters.item (' DXImageTransform.Microsoft.AlphaImageLoader '). src = this.value;
catch (e) {
Alert ("Invalid picture File!") ");
Return
}
SetTimeout ("autoscaling ()", 100);
}
}
else {
var img = $ ("Imgdiv.replacewith (IMG);
Imgdiv = img;
Imgdiv.attr (' src ', this.files.item (0). Getasdataurl ());
Imgdiv.css ({"Vertical-align": "Middle"});
SetTimeout ("autoscaling ()", 100);
}
}
});
}
});
}) (JQuery);
Page section:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<meta content= "" Name= "Keywords"/>
<meta content= "" Name= "Description"/>
<meta content= "Text/html;charset=utf-8" http-equiv= "Content-type"/>
<script type= "Text/javascript" src= "Js/jquery.pack.js" ></script>
<script type= "Text/javascript" src= "Js/uploadpreview/jquery.uploadpreview.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
It is recommended that you add a Overflow:hidden CSS style to the #imgdiv parent element
$ ("input"). Uploadpreview ({width:200, height:200, Imgdiv: "#imgDiv", Imgtype: ["BMP", "GIF", "png", "JPG"]});
});
</script>
<body>
<form id= "Form1" runat= "Server" >
<input type= "File"/>
<br/>
<div style= "width:200px; height:200px; Overflow:hidden; border:1px solid red; " >
<div id= "Imgdiv" >
</div>
</div>
</form>
</body>
