服务器之家：专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - ASP.NET教程 - .Net学习笔记之Layui多图片上传功能

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

2020-06-16 12:37追逐时光 ASP.NET教程

这篇文章主要给大家介绍了关于.Net学习笔记之Layui多图片上传功能的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用.Net具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

 

前言：

 

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

  • 图片上传
  • Layui
  • .NET

    • 延伸 · 阅读

    精彩推荐
    最近更新
    编辑推荐
    阅读排行
    热门标签
    hao123 　 转化 　 HttpClient 　 读取数据 　 oledb 　 ACE 　 本地计算机 　 Quartz 　 Swagger 　 Option 　 释放资源 　 换行 　 DataSet 　 AjaxControlToolKit 　 下拉菜单 　 DropDownList 　 asp.net 　 全角 　 半角 　 .NET 　 弹出框 　 依赖项 　 程序集 　 引用 　 对象 　 网页跳转 　 传值 　 页面 　 重复提交 　 随机密码 　
    © 2019-2024 服务器之家(www.zzvips.com) 版权所有关于我们联系我们版权申明网站地图