I won't upload files here, so I sent the source code and found it online. Use (jquery-1.4.2.min.js, uploadpreview. JS, imgfile. JS)
Uploadpreview. js
(Function ($ ){
Jquery. FN. Extend ({
Uploadpreview: function (OPTs ){
Opts = jquery. Extend ({
Width: 0,
Height: 0,
Imgdiv: "# imgdiv ",
Imgtype: ["GIF", "Jpeg", "jpg", "BMP", "PNG"],
Maxwidth: 0,
Maxheight: 0,
Imgurl: NULL,
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> opts. maxwidth | img_height> opts. maxheight ){
Alert ("the image size does not meet the requirements ");
Clearvalue (_ this [0]);
_ This. Trigger ("Blur"); // The control focus is lost.
Imgdiv. Hide ();
Return false;
}
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;
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 ("the image type must be" + opts. imgtype. Join (",") + ");
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 = getpath (_ this [0]);
} Catch (e ){
Alert ("invalid image 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 );
// Obtain the value of the upload control. obj is the object of the upload control.
Function getpath (OBJ ){
If (OBJ ){
If (window. Navigator. useragent. indexof ("MSIE")> = 1 ){
OBJ. Select ();
Return document. selection. createRange (). text;
}
Else if (window. Navigator. useragent. indexof ("Firefox")> = 1 ){
If (obj. Files ){
Return obj. Files. Item (0). getasdataurl ();
}
Return obj. value;
}
Return obj. value;
}
}
// Clear the value of the upload control. obj is the object of the upload control.
Function clearvalue (OBJ ){
OBJ. Select ();
Document.exe ccommand ("delete ");
}
Imgfile. js
// Upload and preview Images
$ (Document). Ready (function (){
$ ("# Imgfile"). uploadpreview ({
Width: 240, height: 160, imgdiv: "# imgdiv", imgtype: ["BMP", "jpg", "GIF", "PNG"], maxwidth: 24000, maxheight: 16000
});
// Hide the Modified Image
$ ("# Imgfile"). Change (function (){
// $ ("# IMG") indicates the Id read from the background
$ ("# IMG"). Hide ();
});
});
// Background operations, such as preview before upload and preview at Modification
HTML code:
<Div id = "imgdiv" runat = "server" style = "display: none;"> </div>
<Asp: fileupload id = "imgfile" runat = "server" cssclass = "a_textbox_long" width = "234px" Height = "24px"/>
<Asp: Label id = "lbl_address" runat = "server" cssclass = "red" visible = "false"> </ASP: Label>
. CS Code: (displayed when reading)
Imgdiv. innerhtml = " ";
Name saved during upload and modification:
String name = imgfile. postedfile. filename. substring (imgfile. postedfile. filename. lastindexof ("\") + 1 );
String image = ".. /upload/"+ datetime. now. year. tostring () + datetime. now. month. tostring () + datetime. now. day. tostring () + datetime. now. hour. tostring () + datetime. now. minute. tostring () + datetime. now. second. tostring () + name;
For example: