Ajax 上传图片，修改图片，复选框操作，联动详情

public ActionResult UpImage()
        {
            try
            {
                //接收图片
                var hpf = Request.Files[0];
                //将虚拟路径转成物理路径
                var path = Server.MapPath("/Image/");
                //保存
                hpf.SaveAs(path + hpf.FileName);
                //返回图片名称
                return Json(new { cs = 1, fileName = "/Image/" + hpf.FileName });
            }
            catch (Exception)
            {
                return Json(new { cs = 0, fileName = "" });
                throw;
            }
        }

@{
    ViewBag.Title = "Add";
}

添加神奇宝贝信息

"~/Content/bootstrap.css" rel="stylesheet" />

class="table table-bordered">
    

        
名称
        

            "text" id="Name" style="height:30px" />
        
    
    

        
图像
        

            "file" id="Photo" name="Photo" />
            "Img" width="100" height="70" />
            "button" value="上传图片" class="btn btn-success" onclick="UpImage()" />
        
    
    

        
性格
        

            "text" id="Nature" style="width:70px;height:30px" />
        
    
    

        
属性
        

            "checkbox" id="Attribute" name="Attribute" value="火" /> 火
            "checkbox" id="Attribute" name="Attribute" value="水" /> 水
            "checkbox" id="Attribute" name="Attribute" value="草" /> 草
            "checkbox" id="Attribute" name="Attribute" value="恶" /> 恶
            "checkbox" id="Attribute" name="Attribute" value="龙" /> 龙
            "checkbox" id="Attribute" name="Attribute" value="钢" /> 钢
            "checkbox" id="Attribute" name="Attribute" value="飞行" /> 飞行
            "checkbox" id="Attribute" name="Attribute" value="地面" /> 地面
            "checkbox" id="Attribute" name="Attribute" value="岩石" /> 岩石
            "checkbox" id="Attribute" name="Attribute" value="超能" /> 超能
            "checkbox" id="Attribute" name="Attribute" value="幽灵" /> 幽灵

        
    
    

        
性别
        

            "radio" id="Sex" name="Sex" value="true"  checked="checked"/> ♂
            "radio" id="Sex" name="Sex" value="false" /> ♀
        
    
    

        
年龄
        

            "text" id="Age" style="width:70px;height:30px" />
        
    
    

        
生活地区
        

            <select id="Place" onclick="Region()">
                请选择
            select>
            <select id="Region">
                请选择
            select>
        
    
    

        

        

            "button" value="添加" onclick="Add()" />
            "button" value="取消" onclick="location.href=‘/User/Index‘" />
        
    

$(res.list).each(function () {
                var arr = ‘‘
                    + ‘‘ + this.Id + ‘" />‘
                    + ‘‘ + this.Name + ‘‘
                    + ‘‘ + this.Photo + ‘" width="100" height="70" />‘
                    + ‘‘ + this.Nature + ‘‘
                    + ‘‘ + this.Attribute + ‘‘
                    + ‘‘ + (this.Sex ? "blue" : "deeppink") + ‘">‘ + (this.Sex ? "♂" : "♀") + ‘‘
                    + ‘‘ + this.Age + ‘‘
                    + ‘‘ + this.PlaceIdName + ‘‘ + this.RegionIdName + ‘‘
                    + ‘‘+this.Id+‘">编辑-‘ + this.Id + ‘)">删除‘
                    + ‘‘;
                $("#list").append(arr);
            })

function GetBianJi() {
        $.get(‘http://localhost:55145/api/User/GetBianJi/‘ + id, res => {
            $("#Name").val(res.Name);
            $("#Img").attr("src", "/Image/" + res.Photo);
            //定义的全局变量等于图片名
            lamg = res.Photo;
            $("#Nature").val(res.Nature);
            //复选框数值循环显示
            var ce = res.Attribute;
            $("[name=Attribute]").each(function () {
                if (ce.indexOf($(this).val()) > -1) {
                    $(this).prop("checked", true);
                }
                else {
                    $(this).prop("checked", false);
                }
            })
            //单选
            $("[name=Sex][value=" + res.Sex + "]").prop("checked", true);
            $("#Age").val(res.Age);
            $("#Place").val(res.PlaceId);
             //第二个联动下拉框
            Region();
            $("#Region").val(res.RegionId);
        })
    }

    function Update() {
        //判断图片是否存在
        var tup = $("#Photo").val();
        if (tup != null) {
            //$("#Photo").attr("src")
            tup = lamg;//图片名称
        }
        else {
            Photo: $("#Photo")[0].files[0].name;//不存在为空
        }
        //复选框的数组
        var sz = [];
        $(‘[name=Attribute]:checked‘).each(function () {
            sz.push(this.value);
        })

        $.post(‘http://localhost:55145/api/User/Updatabase‘, {
            Id:id,
            Name: $("#Name").val(),
            Photo: tup,
            Nature: $("#Nature").val(),
            Attribute: sz.toString(),
            Sex: $("[name=Sex]:checked").val(),
            Age: $("#Age").val(),
            PlaceId: $("#Place").val(),
            RegionId: $("#Region").val(),
        }, res => {
                if (res > 0) {
                    alert("修改成功");
                    location.href = ‘/User/Index‘;
                }
                else {
                    alert("修改失败");
                }
        })
    }

    //修改传的ID
    var id = location.search.substring(4);
    var lamg = ‘‘;
    $(function () {
        $.ajaxSettings.async = false;
        //第一个联动下拉框
        Place();
        GetBianJi();
        $.ajaxSettings.async = true;
    })