asp.net mvc无刷新图片上传

最近在做一个CMS，有一个图片上传的功能，最开始的使用的$.ajax()实现的图片无刷新上传，但是又不想让  <input type="file" name="file" id="imgFlie" required="required" />这个标签显示出来(主要因为其太丑陋，又不想美化)。最终改为使用JQUERY表单插件FORM.JS是实现图片上传。实现效果如下：

 HTML代码：

  <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="上传图片" />

        </form>

    </div>

图片上传表单

   <tr>

                    <td style="text-align:right;">

                        <label>栏目图片:</label>

                    </td>

                    <td style="text-align:left;"> @Html.TextBoxFor(m => m.NodeImg, new { @class = "txtinput" }) <button class="btn btn-small" id="imgUpload" type="button">浏览</button>

                        <button class="btn btn-small" id="imgLook" type="button">查看</button>

                    </td>

                </tr>

图片显示

JS代码：

 //图片上传

            $("#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代码：

     #region 图片上传 [HttpPost] public JsonResult UpLoadPhoto(HttpPostedFileBase file) { var res = CheckImg(file); string imgurl = ""; string strerror = ""; if (res == "ok") { var fileName = file.FileName;//Path.GetExtension() 也许可以解决这个问题，先不管了。

                int i = fileName.LastIndexOf('.');//取得文件名中最后一个"."的索引 

                string fileextenName = fileName.Substring(i).ToLower(); string newFileName = DateTime.Now.ToString("yyyyMMddhhmmss") + fileextenName; var pathtemp = Path.Combine(Server.MapPath("/Areas/Admin/upload/img/"), newFileName);//先存入临时文件夹

                var scrtemp = Path.Combine("/Areas/Admin/upload/img/", newFileName);//图片展示的地址



                var list = Session["Imgscr"] as List<string>; 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 file) { if (file == null) return "图片不能空！"; if (file.ContentLength / 1024 > 8000) { return "图片太大"; } if (file.ContentLength / 1024 < 10) { return "图片太小！"; } var image = GetExtensionName(file.FileName).ToLower(); if (image != ".bmp" && image != ".png" && image != ".gif" && image != ".jpg" && image != ".jpeg")// 这里你自己加入其他图片格式，最好全部转化为大写再判断，我就偷懒了

 { return "格式不对"; } var scrtemp = Path.Combine("/Areas/Admin/upload/img/", file.FileName);//图片展示的地址

            var list = Session["Imgscr"] as List<string>; if (list != null && list.Find(n => n == scrtemp) != null) { return "同样的照片已经存在！"; } return "ok"; } public string GetExtensionName(string fileName) { if (fileName.LastIndexOf("\\", StringComparison.Ordinal) > -1)//在不同浏览器下，filename有时候指的是文件名，有时候指的是全路径，所有这里要要统一。

 { fileName = fileName.Substring(fileName.LastIndexOf("\\", StringComparison.Ordinal) + 1);//IndexOf 有时候会受到特殊字符的影响而判断错误。加上这个就纠正了。

 } return Path.GetExtension(fileName.ToLower()); } #endregion

View Code

最后给大家推荐一个不错的JUQERY插件artDialog，我感觉是一个非常好的插件。这里有详细的文档说明http://code.google.com/p/artdialog/downloads/list