Jquery allows you to preview uploaded images.

$ (Document). Ready (function (){
// We recommend that you add an overflow: hidden; CSS style to the parent element of # imgdiv.
$ ("# Imagefile "). uploadpreview ({width: 100, height: 100, imgdiv: "# imgdiv", imgtype: ["BMP", "GIF", "PNG", "jpg"]});
});
// Description: Image Upload preview plug-in
// You can generate proportional scaling charts within the fixed width and height range during upload.

// Parameter settings:
// Width stores the image fixed-size container width
// Height stores the Image Height of a fixed-size container
// The jquery ID of the imgdiv page Div
// Imgtype array suffix
// ********************** Image Upload preview plug-in ************ *************
(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 ();
}
}
$ ("# Imagefile"). 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 = This. value;
} 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 );

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<Form name = "uploadform" id = "uploadform" Action = "/backend/merchantmgr/doaddpic" target = "uploadresponse"
Method = "Post" enctype = "multipart/form-Data">
<Input type = "file" name = "imagefile" id = "imagefile"/> <br/>
<Div>
<Div id = "imgdiv">
</Div>
</Div>
<Input type = "button" name = "btnaddbrand" value = "OK"/>
</Form>

 

 

 

 

 

 

 

Public actionresult doaddpic (formcollection collection)
{
If (request. Files. Count = 0) // submit the file of the form.
{
Return view ("addmerchant ");
}

For (INT I = 0; I <request. Files. Count; I ++)
{
VaR PIC = request. Files [I];
If (pic! = NULL & pic. contentlength> 0)
{
System. Drawing. Image image = system. Drawing. image. fromstream (PIC. inputstream );
Int width = image. width;
Int Height = image. height;
Image. Dispose ();
If (PIC. contentlength <1024*1024*2 & width <= 600 & height <= 600)
{
If (PIC. contenttype. compareto ("image/pjpeg") = 0 |
PIC. contenttype. compareto ("image/JPEG") = 0 |
PIC. contenttype. compareto ("image/GIF") = 0 |
PIC. contenttype. compareto ("image/X-PNG") = 0 |
PIC. contenttype. compareto ("image/PNG") = 0) // filter format
{
String filename = pic. filename;
// Save the image path
String originalimagepath = "~ // Uploads // merchantimages ";
// Image access path
String filepath = "/uploads/merchantimages/" + filename;

String filenamepath = path. Combine (server. mappath (originalimagepath), filename );
// Save the image
PIC. saveas (filenamepath );
}
}
}
}
Return redirecttoaction ("addmerchant ");
}