Asp.net mvc no-refreshing Image Upload,

Asp.net mvc no-refreshing Image Upload,

Recently I was working on a CMS, and I had an image upload function. I started to use $. no refreshing upload of images implemented by ajax, however, you do not want to display the <input type = "file" name = "file" id = "imgFlie" required = "required"/> label (mainly because it is too ugly, and do not want to beautify ). Change to useJquery form plugin FORM. JSIs used to upload images. The implementation result is as follows:

HTML code: <div style = "display: none; "> <form action ="/Nodes/UpLoadPhoto "method =" POST "enctype =" multipart/form-data "name =" ImgForm "id =" ImgForm "> <input type = "file" name = "file" id = "imgFlie" required = "required"/> <input type = "submit" name = "subt" value = "Upload image "/> </form> </div>Image Upload form <tr> <td style = "text-align: right;"> <label> topic image: </label> </td> <td style = "text-align: left;"> @ Html. textBoxFor (m => m. nodeImg, new {@ class = "txtinput "}) <button class = "btn-small" id = "imgUpload" type = "button"> browse </button> <button class = "btn-small" id = "imgLook ""type =" button "> View </button> </td> </tr>Image Display

JS Code:

// Image Upload $ ("# imgUpload "). click (function () {$ ("# imgFlie "). click (); var stm1 = setInterval (function () {var imgstr = $ ("# imgFlie "). val (); if (imgstr! = "") {ClearInterval (stm1); $ ("# ImgForm input [type = 'submit ']"). click () ;}}, 500); return false ;}); $ ('# ImgForm '). ajaxForm ({beforeSend: function () {}, success: function (data) {if (data. imgUrl! = "") {$ ("# ImgFlie "). val (""); $ ('# NodeImg '). val (data. imgUrl);} else {alerTips (data. errorInfo) ;}, complete: function (xhr) {$ ("# imgFlie "). val ("");}});View Code

CS code:

# Region Image Upload [HttpPost] public JsonResult UpLoadPhoto (HttpPostedFileBase file) {var res = CheckImg (file); string imgurl = ""; string strerror = ""; if (res = "OK") {var fileName = file. fileName; // Path. getExtension () may solve this problem. Int I = fileName. lastIndexOf ('. '); // get the last ". "index string fileextenName = fileName. substring (I ). toLower (); string newFileName = DateTime. now. toString ("yyyyMMddhhmmss") + fileextenName; var pathtemp = Path. combine (Server. mapPath ("/Areas/Admin/upload/img/"), newFileName); // first save it to the Temporary Folder var scrtemp = Path. combine ("/Areas/Admin/upload/img/", newFileName); // var list = Session ["Imgscr"] as List <st Ring>; var slist = Session ["ImgServerscr"] as List <string>; if (list! = Null) {list. Add (scrtemp);} else {list = new List <string> {scrtemp}; Session ["Imgscr"] = list;} if (slist! = Null) {slist. add (pathtemp);} else {slist = new List <string> {pathtemp}; Session ["ImgServerscr"] = slist;} file. saveAs (pathtemp); // Response. write (""); imgurl = "/Areas/Admin/upload/img/" + newFileName + "" ;}else {strerror = res ;} var Result = new {ErrorInfo = strerror, imgUrl = imgurl}; return Json (Result, JsonRequestBehavior. allowGet);} private string CheckImg (HttpPostedFileBase fil E) {if (file = null) return "the image cannot be blank! "; If (file. ContentLength/1024> 8000) {return" the image is too large ";} if (file. ContentLength/1024 <10) {return" the image is too small! ";} Var image = GetExtensionName (file. FileName). ToLower (); if (image! = ". Bmp" & image! = ". Png" & image! = ". Gif" & image! = ". Jpg" & image! = ". Jpeg ") // here you add other image formats. It is best to convert all the formats to uppercase before judgment. I will be lazy {return" format incorrect ";} var scrtemp = Path. combine ("/Areas/Admin/upload/img/", file. fileName); // address of the Image Display var list = Session ["Imgscr"] as List <string>; if (list! = Null & list. Find (n => n = scrtemp )! = Null) {return "the same photo already exists! ";} Return" OK ";} public string GetExtensionName (string fileName) {if (fileName. lastIndexOf ("\", StringComparison. ordinal)>-1) // in different browsers, filename sometimes refers to the file name, sometimes to the full path, and all should be unified here. {FileName = fileName. Substring (fileName. LastIndexOf ("\", StringComparison. Ordinal) + 1); // IndexOf is sometimes affected by special characters and thus cannot be determined. Add this to correct it.} Return Path. GetExtension (fileName. ToLower ();} # endregionView Code

Finally, I recommend a good JUQERY plug-in artDialog, which I think is a very good plug-in. Here are detailed documentation for http://code.google.com/p/artdialog/downloads/list