.Net学习笔记之Layui多图片上传功能

时间：2022-06-10 21:57:36

 

前言：

 

多图上传在一些特殊的需求中我们经常会遇到，其实多图上传的原理大家都有各自的见解。对于Layui多图上传和我之前所说的通过js获取文本框中的文件数组遍历提交的原理一样，只不过是Layui中的upload.render方法已经帮我们封装好了，我们只管调用即可，也就是说你选中了几张图片，那么将会向后台请求与图片张数相同的次数，即为遍历提交的方式。

Layui文件/图片样式地址（官方文档）：https://www.layui.com/demo/upload.html

 

一、引入Layui.cs和Layui.js：

 

需要本地项目中存在layui相关样式和js，非网络地址

 <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" rel="external nofollow"   media="all">

 <script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>

当然假如你需要有弹框提示的话，你还需要引入Layer.js

 

二、前端代码：

 

a.Html中的代码：

?
1
2
3
4
5
6
7
8
9
10
11
<li>
<h6>滚动图片：</h6>
 <div class="layui-upload">
<button type="button" class="layui-btn" id="test2">滚动图片上传【推荐上传三张】</button> <button type="button" class="layui-btn layui-btn-danger" onclick="clearAll()"><i class="layui-icon"></i></button>
<input type="hidden" name="ScrollingGraph" id="ScrollingGraph"/>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览图：
<div class="layui-upload-list" id="demo2"></div>
</blockquote>
</div>
</li>

b.js中的代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<script>
layui.use('upload',
function () {
var $ = layui.jquery, upload = layui.upload;
//多图片上传
upload.render({
 elem: '#test2',
 url: '/FileUpload/FileLoad/',
 multiple: true,//允许选择多张图片
before: function (obj) {
//预读本地文件示例，不支持ie8
obj.preview(function (index, file, result) {
$('#demo2').append(
'<img src="' + result + '" id="codetool">

 

三、服务端接口图片文件流，并保存：

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
1public class FileUploadController : Controller
 2{
 3/// <summary>
/// 对验证和处理 HTML 窗体中的输入数据所需的信息进行封装，如FromData拼接而成的文件
/// </summary>
/// <param name="context">FemContext对验证和处理html窗体中输入的数据进行封装</param>
/// <returns></returns>
[HttpPost]
public ActionResult FileLoad(FormContext context)
 {
HttpPostedFileBase httpPostedFileBase = Request.Files[0];//获取二进制图片文件流
if (httpPostedFileBase != null)
{
try
{
ControllerContext.HttpContext.Request.ContentEncoding = Encoding.GetEncoding("UTF-8");
ControllerContext.HttpContext.Response.Charset = "UTF-8";
 
string fileName = Path.GetFileName(httpPostedFileBase.FileName);//原始文件名称
string fileExtension = Path.GetExtension(fileName);//文件扩展名
 
byte[] fileData = ReadFileBytes(httpPostedFileBase);//文件流转化为二进制字节
 
string result = SaveFile(fileExtension, fileData);//文件保存
if (string.IsNullOrEmpty(result))
{
return Json(new { isSuccess = false, path = "",errorMsg= "上传文件失败"});
}
 
return Json(new { isSuccess = true, path = result });
}
catch (Exception ex)
{
return Json(new { isSuccess = false, path = "" });
}
}
else
{
return Json(new { isSuccess = false, path = "" });
}
}
 
 
/// <summary>
/// 将文件流转化为二进制字节
/// </summary>
/// <param name="fileData">图片文件流</param>
/// <returns></returns>
private byte[] ReadFileBytes(HttpPostedFileBase fileData)
{
byte[] data;
using (Stream inputStream = fileData.InputStream)
{
MemoryStream memoryStream = inputStream as MemoryStream;
if (memoryStream == null)
{
memoryStream = new MemoryStream();
inputStream.CopyTo(memoryStream);
}
data = memoryStream.ToArray();
}
return data;
}
 
/// <summary>
/// 保存文件
/// </summary>
/// <param name="fileExtension">文件扩展名</param>
/// <param name="fileData">图片二进制文件信息</param>
/// <returns></returns>
private string SaveFile(string fileExtension, byte[] fileData)
{
string result;
try
{
 
string saveName = Guid.NewGuid().ToString()+ fileExtension; //保存文件名称
 
// 文件上传后的保存路径
string basePath = "UploadFile";
string saveDir = DateTime.Now.ToString("yyyy-MM-dd");
string savePath = System.IO.Path.Combine(saveDir, saveName);
 
string serverDir = System.IO.Path.Combine(Server.MapPath("~/"), basePath, saveDir);
if (!System.IO.Directory.Exists(serverDir))
{
System.IO.Directory.CreateDirectory(serverDir);
}
string fileNme = System.IO.Path.Combine(serverDir, saveName);//保存文件完整路径
System.IO.File.WriteAllBytes(fileNme, fileData);//WriteAllBytes创建一个新的文件，按照对应的文件流写入，假如已存在则覆盖
//返回完整的图片保存地址
result="/"+basePath + "/" + saveDir + "/" + saveName;
}
catch (Exception)
{
result = "发生错误";
}
return result;
}
}

 

四、效果图展示：

 

.Net学习笔记之Layui多图片上传功能

.Net学习笔记之Layui多图片上传功能

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对服务器之家的支持。

原文链接：https://www.cnblogs.com/Can-daydayup/p/11125324.html

  • .NET
  • 图片上传
  • Layui

    • 延伸 · 阅读

    精彩推荐
    最近更新
    编辑推荐
    阅读排行
    热门标签
    第一次 　 循环顺序播放 　 编译不通过 　 connectionStrings 　 Linkbutton 　 App.config 　 逆变 　 System.IO 　 XSLT 　 XmlSerializer 　 表头 　 MD.DLL 　 wsdl.exe 　 RowUpdating 　 层次结构数据 　 BitmapImage 　 图片删除 　 Delegate 　 内部原理 　 自动跳转页面 　 UdpClient 　 子对象 　 STAThread 　 循环处理数据 　 Lumisoft.NET 　 CommandField 　 ASPX文件怎么打开 　 aspx文件 　 aspx是什么文件 　 aspx是什么格式 　
    © 2019-2020 服务器之家 版权所有 www.zzvips.com 关于我们联系我们版权申明网站地图
    标签：

    相关文章