欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-28 20:42:02
前言: 多图上传在一些特殊的需求中我们经常会遇到,其实多图上传的原理大家都有各自的见解。对于layui多图上传和我之前所说的通过js获取文本框中的文件数组遍历提交的原...

前言:

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

四、效果图展示:

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

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

总结

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