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

 更新时间:2019年07月10日 10:41:48   作者:追逐时光   我要评论
这篇文章主要给大家介绍了关于.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中的代码:

<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中的代码:

<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 + '" alt="' + file.name + '" class="layui-upload-img">');
});
},
done: function (res) {
if (res.isSuccess == true) {
layer.msg("上传成功");
var scrollingGraph = $("#ScrollingGraph").val();
if (scrollingGraph == "") {
$("#ScrollingGraph").val(res.path);
} else {
scrollingGraph += ',' + res.path;
$("#ScrollingGraph").val(scrollingGraph);
}
console.log(scrollingGraph);
} else {
return layer.msg('上传失败');
}
}
});
});

//清空所有图片
function clearAll() {
layer.confirm("确定要全部清空吗?", {
icon: 3,
btn: ["确定", "取消"],
yes: function (index) {
$("#demo2").html("");
$("#ScrollingGraph").val("");
layer.close(index);
}
});
}
</script>

三、服务端接口图片文件流,并保存:

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;
}
}

四、效果图展示:


总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对澳门金沙网上娱乐的支持。

相关文章

  • asp.net(C#)使用QRCode生成图片中心加Logo或图像的二维码实例

    asp.net(C#)使用QRCode生成图片中心加Logo或图像的二维码实例

    这篇文章主要介绍了asp.net(C#)使用QRCode生成图片中心加Logo或图像的二维码,结合实例形式详细分析了asp.net基于QRCode生成二维码的具体实现技巧,需要的朋友可以参考下
    2016-06-06
  • 查看Json输出的*最方便*的方法 (转)

    查看Json输出的*最方便*的方法 (转)

    项目的表现层使用MVC+Extjs。在开发过程中,一旦页面显示不正常,第一个需要排查的总是“Action是否输出了正确的Json?”。
    2009-11-11
  • datagrid行内按钮(更新/删除等)操作实现代码

    datagrid行内按钮(更新/删除等)操作实现代码

    datagrid控件想必大家很是熟悉,本文将介绍下datagrid行内按钮的操作更新/删除等等,感兴趣的你可不要错过了哈,希望本文知识点可以帮助到你
    2013-02-02
  • Asp.net SignalR快速入门

    Asp.net SignalR快速入门

    这篇文章主要介绍了Asp.net SignalR快速入门,帮助大家可以快速的上手Asp.net SignalR,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • 详解ASP.NET Core 之 Identity 入门(一)

    详解ASP.NET Core 之 Identity 入门(一)

    本篇文章主要介绍了ASP.NET Core 之 Identity 入门,主要负责对用户的身份进行认证,有兴趣的可以了解一下。
    2016-12-12
  • asp.net不用设置iis实现url重写 类似伪静态路由

    asp.net不用设置iis实现url重写 类似伪静态路由

    说到不用设置iis,主要是为了实现在虚拟主机或是拿不到iis操作限的时候,不能添加isap又想实现类似于静态化的程序实现方式,先声明,这里最终要实现的效果是,最终可以用12345.html替换show.aspx?id=12345这样的地址访问功能,支持任意扩展名及无扩展
    2014-01-01
  • asp.net(C#)解析Json的类代码

    asp.net(C#)解析Json的类代码

    现在json因为轻型,越来越流行,部门内部的数据标准趋向于json,所以开始学习。
    2009-12-12
  • asp.net上传图片保存到金沙国际官网的代码

    asp.net上传图片保存到金沙国际官网的代码

    有时候某种需要将图片保存到金沙国际官网中,那么下面的代码就可以参考下,下面没有金沙国际官网的建表说明,但金沙国际官网需要建立下。
    2010-07-07
  • vs.net 2010 扩展插件小结 提高编程效率

    vs.net 2010 扩展插件小结 提高编程效率

    本文价绍了几款Visual Studio提供的插件,提高我们的编程效率。
    2011-03-03
  • asp.net 无刷新附件上传实现方法

    asp.net 无刷新附件上传实现方法

    一直以来附件上传都是个很郁闷的问题,刚开始是利用js添加input file 然后一起提交来实现多文件上传,在使用163邮箱的时候很是羡慕它的附件上传部分(选择完文件就提交,可以多个文件一起上传,而且还可以获取上传进度),这时就很想自己也写个那样的东西出来。
    2010-01-01

最新评论