今天用jquery.form.js 来做异步图片上传功能,在谷歌、猎豹中都可以正常显示,但是在IE中就出现问题了,表现为IE把返回来的JSON识别成了下载文件了。我的代码如下:
1、首先引用
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script> <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.form.js")"></script>
2、html页面
<form id="fileForm" method="post" action="@Url.Content("~/Admin/File/ImageUpLoad")" enctype="multipart/form-data" > <input type="file" name="upImage" class="mt10" size="50" /> <input id="btnUpload" type="button" value="上传" /> <span class="gray">图片格式 jpg/gif 小于1M</span><br /> </form>
3、javascript代码
//如果文件上传正常,那么返回值中是包含文件名的,文件名的格式就是数字+.jpg或gif
function isImageFileName(str) { var reg = /([0-9]{1,}.jpg)|([0-9]{1,}.gif)/; if (reg.test(str)) { return true; } return false; }
$(function () { //异步上传图片 $("#btnUpload").click(function () { if ($("#upImage").val() == "") { alert("请选择一个图片文件,再点击上传。"); return; } $('#fileForm').ajaxSubmit({ success: function (msg) { var start = msg.indexOf(">"); if (start != -1) { var end = msg.indexOf("<", start + 1); if (end != -1) { msg = msg.substring(start + 1, end); } }//上面这一段是因为在谷歌等一些浏览器会导致获取的值包含<pre>标签 var regex = new RegExp("\"", "g"); msg = msg.replace(regex, "") //这段是有些浏览器会给msg字符串加上双引号的标签,现在就去掉双引号标签 if (isImageFileName(msg)) { $("#upLoadImageShow").attr('src', msg);//这里是重新设置图片的地址 } else alert(msg); } }); }); });
4、后台的FileController代码
[HttpPost] public ActionResult ImageUpLoad() { //定义错误消息 string msg = ""; //接受上传文件 HttpPostedFileBase hp = Request.Files["upImage"]; if (hp == null) { msg = "请选择文件."; } //获取上传目录 转换为物理路径 string uploadPath = Server.MapPath("~/Areas/Admin/Content/images/actives/"); //获取文件名 string fileName = DateTime.Now.Ticks.ToString()+System.IO.Path.GetExtension(hp.FileName); //获取文件大小 long contentLength = hp.ContentLength; //文件不能大于1M if (contentLength > 1024 * 1024) { msg = "文件大小超过限制要求."; } if (!checkFileExtension(fileName)) { msg = "文件为不可上传的类型."; } //保存文件的物理路径 string saveFile = uploadPath + fileName; try { //保存文件 hp.SaveAs(saveFile); msg = "/Areas/Admin/Content/images/actives/" + fileName; } catch { msg = "上传失败."; } return Json(msg); }
把controller里面的Json(msg)修改成
return Json(new { error = "yes", message = "信息" }, "application/json; charset=utf-8", JsonRequestBehavior.AllowGet);
这样就行了!