服务器之家

服务器之家 > 正文

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

时间：2020-06-16 12:37     来源/作者：追逐时光

 

前言：

 

多图上传在一些特殊的需求中我们经常会遇到，其实多图上传的原理大家都有各自的见解。对于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 

相关文章

热门资讯

歪歪漫画vip账号共享2020_yy漫画免费账号密码共享
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享 2020-04-07
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
沙雕群名称大全2019精选 今年最火的微信群名沙雕有创意
沙雕群名称大全2019精选 今年最火的微信群名沙雕有创意 2019-07-07
玄元剑仙肉身有什么用 玄元剑仙肉身境界等级划分
玄元剑仙肉身有什么用 玄元剑仙肉身境界等级划分 2019-06-21
男生常说24816是什么意思？女生说13579是什么意思？
男生常说24816是什么意思？女生说13579是什么意思？ 2019-09-17
返回顶部