溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
怎樣用.net mvc和layui實現圖片上傳？針對這個問題，今天小編總結了這篇文章，希望能幫助更多想解決這個問題的朋友找到更加簡單易行的辦法。
圖片上傳和展示是互聯網應用中比較常見的一個功能，本文圖片上傳功能前端用到的圖片上傳控件是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（）獲取的是圖片的絕對路徑，而實際調用圖片時，考慮到網站安全性問題，瀏覽器并不允許我們的頁面使用絕對路徑去獲取圖片資源，因此，在數據庫中保存的路徑只能是相對路徑。
下面給出完整的前端代碼，包括圖片上傳的改進和所有信息的保存：
@{
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
});
}
}下面展示一下頁面：
然后看一下數據庫里的信息：
再看一下我們對應的圖片保存的位置：
關于用.net mvc和layui實現圖片上傳的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
