一、Ajax图片上传显示
1、控制器操作
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; } }
2、在添加页面上的操作
上传图片 和获取 复选框
@{ ViewBag.Title = "Add"; } <h2>添加神奇宝贝信息</h2> <script src="~/Scripts/jquery-3.4.1.min.js"></script> <link href="~/Content/bootstrap.css" rel="stylesheet" /> <table class="table table-bordered"> <tr> <td>名称</td> <td> <input type="text" id="Name" style="height:30px" /> </td> </tr> <tr> <td>图像</td> <td> <input type="file" id="Photo" name="Photo" /> <img id="Img" width="100" height="70" /> <input type="button" value="上传图片" class="btn btn-success" onclick="UpImage()" /> </td> </tr> <tr> <td>性格</td> <td> <input type="text" id="Nature" style="width:70px;height:30px" /> </td> </tr> <tr> <td>属性</td> <td> <input type="checkbox" id="Attribute" name="Attribute" value="火" /> 火 <input type="checkbox" id="Attribute" name="Attribute" value="水" /> 水 <input type="checkbox" id="Attribute" name="Attribute" value="草" /> 草 <input type="checkbox" id="Attribute" name="Attribute" value="恶" /> 恶 <input type="checkbox" id="Attribute" name="Attribute" value="龙" /> 龙 <input type="checkbox" id="Attribute" name="Attribute" value="钢" /> 钢 <input type="checkbox" id="Attribute" name="Attribute" value="飞行" /> 飞行 <input type="checkbox" id="Attribute" name="Attribute" value="地面" /> 地面 <input type="checkbox" id="Attribute" name="Attribute" value="岩石" /> 岩石 <input type="checkbox" id="Attribute" name="Attribute" value="超能" /> 超能 <input type="checkbox" id="Attribute" name="Attribute" value="幽灵" /> 幽灵 </td> </tr> <tr> <td>性别</td> <td> <input type="radio" id="Sex" name="Sex" value="true" checked="checked"/> ♂ <input type="radio" id="Sex" name="Sex" value="false" /> ♀ </td> </tr> <tr> <td>年龄</td> <td> <input type="text" id="Age" style="width:70px;height:30px" /> </td> </tr> <tr> <td>生活地区</td> <td> <select id="Place" onclick="Region()"> <option>请选择</option> </select> <select id="Region"> <option>请选择</option> </select> </td> </tr> <tr> <td></td> <td> <input type="button" value="添加" onclick="Add()" /> <input type="button" value="取消" onclick="location.href=‘/User/Index‘" /> </td> </tr> </table> <script> $(function () { Place(); }) //地区 function Place() { $.get(‘http://localhost:55145/api/User/GetPlace/‘ + 0, res => { $(res).each(function () { $("#Place").append(‘<option value="‘ + this.NId + ‘">‘ + this.Place + ‘</option>‘); }) }) } //区域 function Region() { $("#Region").empty(); var id = $("#Place").val(); $.get(‘http://localhost:55145/api/User/GetPlace/‘ + id, res => { $("#Region").empty(); $("#Region").append("<option>请选择</option>"); $(res).each(function () { $("#Region").append(‘<option value="‘ + this.NId + ‘">‘ + this.Place + ‘</option>‘); }) }) } //上传 图片 function UpImage() { //FormDate js当中的一个表单的对象 var fd = new FormData(); fd.append("Photo", $("#Photo")[0].files[0]); //一定是ajax 方式上传 请求一定是POST $.ajax({ url: ‘UpImage‘, type: ‘post‘, dataType: ‘json‘, data: fd, contentType: false,//不限制类型 processData: false,//默认 success: function (data) { if (data.cs == 1) { //图片预览 $("#Img").attr("src", data.fileName); } } }) } //添加 function Add() { var sz = []; $(‘[name=Attribute]:checked‘).each(function () { sz.push(this.value); }) $.post(‘http://localhost:55145/api/User/Add‘, { Name: $("#Name").val(), Photo: $("#Photo")[0].files[0].name, 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("添加失败"); } }) } </script>
3、在显示页面的操作
$(res.list).each(function () { var arr = ‘<tr>‘ + ‘<td><input type="checkbox" name="box" value="‘ + this.Id + ‘" /></td>‘ + ‘<td>‘ + this.Name + ‘</td>‘ + ‘<td><img src="/Image/‘ + this.Photo + ‘" width="100" height="70" /></td>‘ + ‘<td>‘ + this.Nature + ‘</td>‘ + ‘<td>‘ + this.Attribute + ‘</td>‘ + ‘<b><td style="color:‘ + (this.Sex ? "blue" : "deeppink") + ‘">‘ + (this.Sex ? "♂" : "♀") + ‘</td></b>‘ + ‘<td>‘ + this.Age + ‘</td>‘ + ‘<td>‘ + this.PlaceIdName + ‘‘ + this.RegionIdName + ‘</td>‘ + ‘<td><a href="Edit?id=‘+this.Id+‘">编辑</a>-<a href="#" onclick="Delete(‘ + this.Id + ‘)">删除</a></td>‘ + ‘</tr>‘; $("#list").append(arr); })
4、编辑详情和编辑修改操作
解:页面显示和添加一样
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("修改失败"); } }) }
5、修改时获取联动详情
//修改传的ID var id = location.search.substring(4); var lamg = ‘‘; $(function () { $.ajaxSettings.async = false; //第一个联动下拉框 Place(); GetBianJi(); $.ajaxSettings.async = true; })