图片上传和展示是互联网应用中比较常见的一个功能，本文图片上传功能前端用到的图片上传控件是layui ,数据库是用的 sql server ，code first开发模式。
一、创建表
因为图片上传之后需要保存路径等信息，所以，得先建一个image表，表的设计为如下：
下面看实体类和上下文的代码：
1.新建实体类image.cs
如图：
代码如下：
image.cs
using system;using system.collections.generic;using system.componentmodel.dataannotations;using system.componentmodel.dataannotations.schema;using system.linq;using system.text;using system.threading.tasks;namespace modules{ [table("info_image")] public class image { public image() { isdelete = false; } /// <summary> /// 主键id /// </summary> public guid id { get; set; } /// <summary> /// 图片名 /// </summary> [required] [maxlength(50)] public string name { get; set; } /// <summary> /// 图片保存链接 /// </summary> [required] [maxlength(50)] public string url { get; set; } /// <summary> /// 上传时间 /// </summary> public datetime uploadtime { get; set; } /// <summary> /// 备注 /// </summary> [maxlength(200)] public string remark { get; set; } /// <summary> /// 是否删除 /// </summary> public bool isdelete { get; set; } }}
2.将实体类添加到上下文：
如图：
代码：
mydbcontext.cs
public dbset<image> images { get; set; }
如果你和我一样是code first开发模式的话，那让程序跑一遍，这个数据表就应该在你的数据库里生成了，哈哈，这只是一个建表的过程，只要表能建好，什么模式都好，哈哈。
二、前端代码
1.新建控制器imageuploadcontroller.cs,然后创建一个视图index.cshtml：
这里会用到layui的图片上传，关于这部分的代码使用，可以自行去layui官网查看：https://www.layui.com/demo/upload.html；
以下是页面图片，以及代码：
这是还没编写后台上传图片代码时的页面图片：
以下是前端代码：
@{ layout = "../shared/_toplayout.cshtml";}<!doctype html><html><head> <meta name="viewport" content="width=device-width" /> <title>index</title></head><body> <div id="picupload"> <div class="layui-form-item"> <label class="layui-form-label required">图片标题</label> <div class="layui-input-block" style="width: 554px; position: relative;"> <input type="text" name="imagetitle" lay-verify="required" placeholder="图片标题" autocomplete="off" class="layui-input" id="ititle"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">备注</label> <div class="layui-input-block" style="width: 554px; position: relative;"> <textarea placeholder="请输入内容" class="layui-textarea" name="remark"></textarea> </div> </div> <div class="layui-form-item"> <div class="layui-upload"> <label class="layui-form-label">上传图片</label> <button type="button" class="layui-btn" id="test1">上传图片</button> <div class="layui-upload-list"> <label class="layui-form-label">图片展示</label> <img class="layui-upload-img" id="demo1" style="width:200px;height:auto;"> <p id="demotext"></p> </div> </div> </div> </div></body></html><script type="text/javascript"> layui.use('upload', function () { var $ = layui.jquery; var upload = layui.upload; //普通图片上传 var uploadinst = upload.render({ elem: '#test1', url: '@url.action("upload","imageupload")', //上传地址，后台的某个控制器 before: function (obj) { obj.preview(function (index, file, result) { $('#demo1').attr('src', result); }); }, //长传之前执行的代码，将需要上传的图片显示在页面上 done: function (res) { if (res.result) { } }, //上传成功后的回传数据，后台代码未编写，此处尚为写任何内容，将在后面的内容中补上 error: function () { //演示失败状态，并实现重传 var demotext = $('#demotext'); demotext.html('<span style="color: #ff5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'); demotext.find('.demo-reload').on('click', function () { uploadinst.upload(); }); } }); });</script>
三、后台代码及前端代码完善
接下来在上面代码所示的后台链接（）中编写图片上传代码：
下面先贴出代码，然后再讲解上传思路：
imageuploadcontroller.cs
/// <summary> /// 上传图片 /// </summary> /// <returns></returns> public actionresult upload() { try { httpfilecollectionbase files = request.files; httppostedfilebase file = files[0]; //获取文件名后缀 string extname = path.getextension(file.filename).tolower(); //获取保存目录的物理路径 if (system.io.directory.exists(server.mappath("/images/")) == false)//如果不存在就创建images文件夹 { system.io.directory.createdirectory(server.mappath("/images/")); } string path = server.mappath("/images/"); //path为某个文件夹的绝对路径，不要直接保存到数据库 // string path = "f:\\tgeosmart\\image\\"; //生成新文件的名称，guid保证某一时刻内图片名唯一（文件不会被覆盖） string filenewname = guid.newguid().tostring(); string imageurl = path + filenewname + extname; //saveas将文件保存到指定文件夹中 file.saveas(imageurl); //此路径为相对路径，只有把相对路径保存到数据库中图片才能正确显示（不加~为相对路径） string url = "\\images\\" + filenewname + extname; return json(new { result = true, data = url }); } catch (exception exception) { return json(new { result = false, exception.message }); } }
上面一段代码里有详细的注释信息，这里需要注意的是，我们保存图片的路径的问题。
server.mappath（）函数获取的是某个文件夹的绝对路径，关于这个函数的一些用法我百度一份截图贴在这里：
server.mappath（）获取的是图片的绝对路径，而实际调用图片时，考虑到网站安全性问题，浏览器并不允许我们的页面使用绝对路径去获取图片资源，因此，在数据库中保存的路径只能是相对路径，也就是代码中这一句的作用：
上面代码中，我并没有直接保存imageurl到数据库中，另外生成一个相对路径保存图片，原因就是这个。
下面给出完整的前端代码，包括图片上传的改进和所有信息的保存：
@{ layout = "../shared/_toplayout.cshtml";}<!doctype html><html><head> <meta name="viewport" content="width=device-width" /> <title>index</title></head><body> <div id="picupload"><!--新增代码，添加信息保存按钮--> <div class="layui-form-item sel-fixed-right"> <div class="layui-input-block"> <input type="button" class="layui-btn layui-btn-small layui-btn-normal" value="保存" onclick="saveinfo()" /> </div> </div> <div class="layui-form-item"> <label class="layui-form-label required">图片标题</label> <div class="layui-input-block" style="width: 554px; position: relative;"> <input type="text" name="imagetitle" lay-verify="required" placeholder="图片标题" autocomplete="off" class="layui-input" id="ititle"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">备注</label> <div class="layui-input-block" style="width: 554px; position: relative;"> <textarea placeholder="请输入内容" class="layui-textarea" name="remark" id="iremark"></textarea> </div> </div> <div class="layui-form-item"> <div class="layui-upload"> <label class="layui-form-label">上传图片</label> <button type="button" class="layui-btn" id="test1">上传图片</button> <div class="layui-upload-list"> <label class="layui-form-label">图片上传前展示</label> <img class="layui-upload-img" id="demo1" style="width:200px;height:auto;"> <p id="demotext"></p> </div><!--新增代码，上传后图片显示 -- > <div class="layui-upload-list"> <label class="layui-form-label">图片上传后展示</label> <img class="layui-upload-img" id="demo2" style="width:200px;height:auto;"> </div> </div> </div> </div></body></html><script type="text/javascript"> var imageurl;//新增代码，保存上传图片后回传的图片路径 layui.use('upload', function () { var $ = layui.jquery; var upload = layui.upload; //普通图片上传 var uploadinst = upload.render({ elem: '#test1', url: '@url.action("upload","imageupload")', before: function (obj) { obj.preview(function (index, file, result) { $('#demo1').attr('src', result); }); }, done: function (res) { if (res.result) {//新增代码，将回传的图片保存路径进行保存并将图片绑定到上传后图片展示处 imageurl = res.data; $("#demo2").attr("src", imageurl); } }, error: function () { //演示失败状态，并实现重传 var demotext = $('#demotext'); demotext.html('<span style="color: #ff5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'); demotext.find('.demo-reload').on('click', function () { uploadinst.upload(); }); } }); });//新增代码，将完整的信息传到后台保存 var saveinfo = function () { $.ajax({ type: 'post', url: '@url.action("save", "imageupload")', datatype: 'json', data: { title: $("#ititle").val(), remark: $("#iremark").val(), url:imageurl }, success: function (res) { if (res.result) { alert("保存成功"); } } }); }</script>
然后，补齐后端信息保存的代码：
public actionresult save(string title,string remark,string url) { try { var imageinfo = new imageinfo() { id = guid.newguid(), name = title, url = url, remark = remark, uploadtime = datetime.now.tolocaltime() }; context.imageinfos.add(imageinfo); context.savechanges(); return json(new{ result = true }); } catch (exception exception) { return json(new { result = true, exception.message }); } }
下面展示一下页面：
然后看一下数据库里的信息：
再看一下我们对应的图片保存的位置：
更多layui知识请关注layui使用教程栏目。
以上就是.net mvc+layui做图片上传图文详解的详细内容。