无刷新上传图片

第一步：往项目拖进MyAjaxForm.js文件

第二步：在客户端书写代码

//文件上传
        function bindFileUpClick() {
            $("#点击上传图片按钮的id").click(function () {
                if ($("#上传图片input标签id").val() == "") {
                    $.messager.alert("提示", "请选择上传的文件", "error");
                    return;
                }
                //开始进行异步上传图片文件
                $("#表单Form的id").ajaxSubmit({
                    success: function (data) {
                        var serverData = data.split(':');
                        if (serverData[0] == "yes") {
                            $("#上传后显示上传的图片div的id").append("<img src='" + serverData[1] + "' width='40px' height='40px'/>");
                            $("#hiddenMenuIcon").val(serverData[1]);//将上传成功的图片地址放在隐藏域中，单击提交表单按钮，完成提交
//注意隐藏域的name属性值必须跟数据库存放图片地址的字段第一样，这样方便提交
                        } else {
                            $.messager.alert("提示", serverData[1], "error");
                        }
                    },
                    url: "/控制器名称/方法名称",
                    type: "post"

                });
            });
        }

第三步：服务端代码

public ActionResult FileUpload()
        {
            HttpPostedFileBase file = Request.Files["上传图片input标签name"];
            if (file.ContentLength > 0)//用后面这种判断不严谨：file!= null，如果用户什么都不选直接点击上传就会出错
            {
                string fileName = Path.GetFileName(file.FileName);//获取上传的文件名 
                string fileExt = Path.GetExtension(fileName);//获取扩展名
                if (fileExt == ".jpg")
                {
                    string dir = "/存放上传图片的目录名称/" + DateTime.Now.Year + "/" + DateTime.Now.Month + "/" + DateTime.Now.Day + "/";
                    //存放上传图片的目录名称如果不存在，下面这行代码会根据上面的dir自动创建一个 
                    Directory.CreateDirectory(Path.GetDirectoryName(Request.MapPath(dir)));
                    string filenewName = Guid.NewGuid().ToString();
                    string fullDir = dir + filenewName + fileExt;
                    file.SaveAs(Request.MapPath(fullDir));
                    return Content("yes:" + fullDir);
                }else{
                    return Content("no:文件类型错误!!");
                }
            }else{
                return Content("no:请选择上传的图片文件");
            }
        }

　　

这个例子是为用户添加权限的，当用户选好权限后，点击确定，就把整个添加权限表单一起提交到服务端，这时候上传的图片也一块提交过来，因为前端上传图片的<input name="Menue">，Menue与数据库中存放图片地址的字段名称一样，所以在服务端就不用额外赋值了，会自动填充，然后执行下面这个方法就完成了图片上传并且保存图片地址到数据库了

public ActionResult AddActionInfo(ActionInfo actionInfo)
{
            actionInfo.DelFlag = 0;
            actionInfo.ModifiedOn = DateTime.Now.ToShortTimeString();
            actionInfo.SubTime = DateTime.Now;
            actionInfo.Url = actionInfo.Url.ToLower();
            ActionInfoService.AddEntity(actionInfo);
            return Content("ok");
}