编写项目时，在新增数据的时候，有一些地方会要求我们上传图片，通过图片来使我们所要上传的数据更加完善。下文就对图片上传进行讲解。
本文使用的开发工具是 ：Visual Studio 2019
主要的开发语言有 ：C# , javajscript , jquery
使用的框架 ：layui
在讲解之前，我们先把样式写好，一个按钮和一个form表单。
<button class="btn btn-outline-primary" onclick="openUpEeditorFile()">添加图片</button>
<div id="textContent" class="file" contenteditable="true"></div>
@*文件上传表单*@
<div style="display: none">
<form id="formEditorFile"
action="/ExamQuesManagement/ManualImport/UpEeditorFile"//连接控制器的链接
method="post" enctype="multipart/form-data">
<!--enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。-->
<!--multipart/form-data 不对字符编码。-->
<!--在使用包含文件上传控件的表单时，必须使用该值。-->
<input type="file" name="file" class="form-control"
onchange="funUpEeditorFile()" />
</form>
</div>
样式如下：
写完样式后，我们给按钮添加一个点击事件。
//1.0 添加文件 选择需要图片文件
function openUpEeditorFile() {
$("#formEditorFile input[type='file']").click();
}
//1.1提交表单数据 图片文件
function funUpEeditorFile() {
//文件上传表单formEditorFile中input[type=file]的onchange事件
$("#formEditorFile").ajaxSubmit(function (data) {
//ajaxSubmit form表单提交的插件
if (data.State) {//
var str = $("#textContent").html();//获取textContent的HTML
str += data.Text;//
$("#textContent").html(str)
} else {
layer.msg(data.Text, { icon: 0, skin: "layui-layer-molv" });
}
});
}
当点击添加图片时，打开文件夹，选择图片：
写完什么步奏后发现图片还没有显示，这时我们要对图片进行压缩，压缩后的图片才能显示。
//1.2图片压缩
function AutoResizeImage(maxWidth, maxHeight, objImg) {
var img = new Image();
img.src = objImg.src;
var hRatio;
var wRatio;
var Ratio = 1;
var w = img.width;
var h = img.height;
wRatio = maxWidth / w;
hRatio = maxHeight / h;
if (maxWidth == 0 && maxHeight == 0) {
Ratio = 1;
} else if (maxWidth == 0) {//
if (hRatio < 1) Ratio = hRatio;
} else if (maxHeight == 0) {
if (wRatio < 1) Ratio = wRatio;
} else if (wRatio < 1 || hRatio < 1) {
Ratio = (wRatio <= hRatio ? wRatio : hRatio);
}
if (Ratio < 1) {
w = w * Ratio;
h = h * Ratio;
}
objImg.height = h;
objImg.width = w;
}
压缩完图片后，打开页面点击添加图片，发现它报了一个错误。
404是什么意思呢？
答：404 （未找到） 服务器找不到请求的网页。（路径错误）
当我们打开文件点击图片时，图片的路径找不到，就报了404的错误。
这时，我们需要在控制器里面编写一部分代码，用来放置图片。
public ActionResult UpEeditorFile(HttpPostedFileBase file)
{
ReturnJson msg = new ReturnJson();
msg.State = false;
try
{
//判断文件是否为空
if (file != null)
{
#region 获取文件类型 设置文件名称 检查文件目录是否存在
//获取文件类型
string fileExtension = System.IO.Path.GetExtension(file.FileName);
//创建文件的名称
string fileName = DateTime.Now.ToString("yyyy-MM-dd")
//表示全局唯一标识符 (GUID)
+ Guid.NewGuid() + fileExtension;
//检查目录是否存在,不存在就创建
if (!Directory.Exists(Server.MapPath("~/Document/Title/Temp/")))
{//创建目录/Document/Notice/
Directory.CreateDirectory(Server.MapPath("~/Document/Title/Temp/"));
}
if (!Directory.Exists(Server.MapPath("~/Document/Title/Images/")))
{//创建目录/Document/Notice/
Directory.CreateDirectory(Server.MapPath("~/Document/Title/Images/"));
}
#endregion
//保存文件的路径
string filePath = Server.MapPath("~/Document/Title/Temp/") + fileName;
#region 若扩展名不为空则判断文件是否是指定图片类型 ,然后返回img
if (fileExtension != null)
{
fileExtension = fileExtension.ToLower();//转小写字母
if ("(.gif)|(.jpg)|(.bmp)|(.jpeg)|(.png)".Contains(fileExtension))
{
//保存文件
file.SaveAs(filePath);//将文件保存到指定路径
string str = "<img οnlοad=\"AutoResizeImage(200,200,this)\" "
+ "src=\"/Document/Title/Temp/" + fileName + "\" />";
msg.State = true;
msg.Text = str;
}
else
{
msg.Text = "只支持上传图片文件(gif,jpg,bmp,jpeg,png)";
}
}
#endregion
}
else
{
msg.Text = "上传的文件为空！";
}
}
catch (Exception e)
{
msg.Text = "上传异常！";
}
return Json(msg, JsonRequestBehavior.AllowGet);
}
上面代码并不是复制粘贴就可以了，保存图片的路径是把图片放置在创建好的文件里面，如下图。
代码中的 ReturnJson 是一个类名，用来调用所需要的属性。
写完以上步奏后，点击添加图片，效果如下：
图片上传就讲到这，如有问题可在评论区里留言。 谢谢观看 @^_^@ 。
