.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; } }
四、效果图展示:
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对的支持。