<html><head> <meta name="viewport" content="width=device-width" /> <title>AddImg</title> <script src="~/Content/jquery-3.1.1.js"></script> <link href="~/Content/bootstrap.css" rel="stylesheet" /> <script> var pageindex = 1; var pagecount = 0; $(function () { $("#form1").hide(); GetCarGroup(); Show(); }) function GetCarGroup() { $.ajax({ url: '/CarHome/GetCarImgType', type: 'post', success: function (data) { var json = JSON.parse(data); $("#ImgTypeID").empty(); $("#ImgTypeID").append('<option value="-1">请选择</option>'); for (var i = 0; i < json.length; i++) { var op = '<option value = " ' + json[i].ID + '">' + json[i].CarImgTypeName + '</option>'; $("#ImgTypeID").append(op); } } }) } function Img() { $("#form1").show(); } function UpImg() { $.ajax({ url: '/CarHome/Imgsed', type: 'post', contentType: false, processData: false, cache: false, data: new FormData($("#form1")[0]), success: function (data) { if (data != "0") { $("[name=ImgUlr]").val(data); $("#form1").hide(); alert("图片上传成功！"); return; } else { alert("图片不能为空！"); return; } } }) } function AddImgs() { $.ajax({ url: '/CarHome/AddImged', data: $("#form0").serialize(), type: 'post', success: function (data) { if (data > 0) { pageindex = 1; Show(); alert("添加成功！"); return; } else { alert("添加失败！"); return; } } }) } function Show() { $.ajax({ url: '/CarHome/GetImgList', type: 'post', data: { pageindex: pageindex, name: $("[name=name]").val() }, success: function (data) { var json = JSON.parse(data); pageindex = json.PageIndex; pagecount = json.PageCount; $("#tb").empty(); for (var i = 0; i < json.Data.length; i++) { var tr = '<tr>' + '<td>' + json.Data[i].CarImgTypeName + '</td>' + '<td>' + json.Data[i].ImgTitle + '</td>' + '<td><img src="' + json.Data[i].ImgUlr + '" width="50" height="50"/></td>' + '<td>' + json.Data[i].ImgTime + '</td>' + '<td><input type="button" value="删除图片" οnclick="Del(' + json.Data[i].ID + ')"/></td>' + '</tr>'; $("#tb").append(tr); } } }) } function Del(id) { $.ajax({ url: '/CarHome/Delete', type: 'post', data: { id: id }, success: function (data) { if (data > 0) { alert("删除图片成功！"); Show(); return; } else { alert("删除图片失败！"); return; } } }) } function FristPage() { pageindex = 1; Show(); } function Prven() { if (pageindex - 1 < 1) { alert("这已是首页！"); return; } pageindex -= 1; Show(); } function Next() { if (pageindex + 1 > pagecount) { alert("这已是尾页！"); return; } pageindex += 1; Show(); } function Last() { pageindex = pagecount; Show(); } </script></head><body> <div> <form action="/" method="post" id="form0"> <input type="hidden" name="ImgUlr" value="" /> <table> <tr> <td>标题</td> <td><input type="text" name="ImgTitle" /></td> <td>图片分组</td> <td> <select id="ImgTypeID" name="ImgTypeID"></select> </td> </tr> <tr> <td>图片信息</td> <td><input type="button" οnclick="Img()" value="选择图片" /></td> <td></td> <td><input type="button" value="上传图片" οnclick="AddImgs()" /></td> </tr> </table> </form> <form action="/" method="post" id="form1"> <input type="file" name="file" id="file" /> <input type="button" value="上传图片" οnclick="UpImg()" /> </form>
<span>车型图库</span><br /> <input type="text" name="name"/><input type="button" value="搜索" οnclick="Show()"/> <table class="table table-responsive"> <thead> <tr> <td>图片分组</td> <td>图片标题</td> <td>图片</td> <td>上传时间</td> <td>操作</td> </tr> </thead> <tbody id="tb"></tbody> </table> <input type="button" value="首页" οnclick="FristPage()" /> <input type="button" value="上一页" οnclick="Prven()" /> <input type="button" value="下一页" οnclick="Next()" /> <input type="button" value="尾页" οnclick="Lase()" /> </div></body></html>
转载于:https://www.cnblogs.com/Wangyang11/p/10003370.html
相关资源：JAVA上百实例源码以及开源项目