的Layui多图上传功能 网络学习笔记

前言：

多图上传经常会遇到一些特殊要求。其实对于多图上传的原理，每个人都有自己的看法。Layui多图上传的原理和通过js在文本框中获取文件数组遍历提交的原理是一样的，只不过Layui中的upload.render方法已经为我们打包好了，所以我们只需要调用就可以了，也就是说，如果你选择了几张图片，你会向后台询问与图片数量相同的次数，这就是遍历提交的方式。

Layui文件/图片样式地址(官方文件):https://www.layui.com/demo/upload.html

一、引入Layui.cs和Layui.js：

要求在本地项目中存在与layui相关的样式和js(非网络地址)

link rel='样式表' href='//RES . layui.com/layui/dist/CSS/layui . CSS ' rel='外部nofollow' media='all '

脚本src=' http://RES . layui.com/layui/dist/layui . js ' charset=' utf-8 '/脚本

当然，如果需要有对话框提示，还需要引入Layer.js

二、前端代码：

a.Html中的代码：

Lih6滚动图片：/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=' scrollingraph '/blockquote class=' layui-elem-quote layui-quote-nm '预览：div class=' layui-upload-list ' id=' demo 2 '/div/block quote/div/lib . js中的代码：

scriptlayui.use('upload '，function () {var $=layui.jquery，upload=layui.upload//多图片上传上传。render({ elem : ' # test2 '，url: '/FileUpload/FileLoad/')，multiple: true，//允许选择多张图片：之前函数{//预读本地文件示例，不支持ie8obj.preview(函数（索引、文件、结果){$('#demo2 ').追加(' img src='http: '结果“alt=”文件。name ' ' class=' layui-upload-img ' ')；});}，done:函数(RES){ if(RES . issuescess==true){ layer。“msg(”上传成功');var scrollingGraph=$(' # scrollingGraph ').val()；if(scrollingGraph==' '){ $(' # scrollingGraph ').val(RES . path)；} else {scrollingGraph='，res.path$('#ScrollingGraph ').瓦尔(scrolling graph)；}控制台。日志(scrolling graph)；} else {return layer.msg('上传失败');}}});});//清空所有图片函数clearAll() {layer.confirm('确定要全部清空吗？{icon: 3，btn: ['确定', '取消]，是：函数（索引){$('#demo2 ').html(" ")；$('#ScrollingGraph ').val(" ")；layer.close(索引);}});}/script

三、服务端接口图片文件流，并保存：

1公共类文件上传控制器：控制器2 { 3///摘要///对验证和处理超文本标记语言窗体中的输入数据所需的信息进行封装，如FromData拼接而成的文件////summary///param name=' context ' femtcontext对验证和处理超文本标记语言窗体中输入的数据进行封装/param///returns/returns[httpset]公共操作结果文件加载(FormContext context){ httptedfilebase=Request .文件[0];//获取二进制图片文件流if(https tedfilebase！=null){ 0尝试{ControllerContext .请求内容编码=编码GetEncoding(' UTF-8 ')；控制器上下文.响应。字符集=' UTF-8 '；字符串文件名=路径GetFileName(HttpTedfilebase .FileName)；//原始文件名称字符串文件扩展名=路径. GetExtension(FIlename)；//文件扩展名byte[]文件数据=ReadFileBytes(httpedfilebase)；//文件流转化为二进制字节字符串结果=SaveFile(文件扩展名，文件数据);//文件保存如果(字符串IsNullOrEmpty(result)){ return Json(new { issuess=false，path=' '，errorMsg='上传文件失败'});}返回JSON(new { ISS process=true，path=result })；} catch(Exception ex){ return Json(new { issuess=false，path=' ' })；} } else { return Json(new { issuess=false，path=' ' })；}}///摘要///将文件流转化为二进制字节////summary///param name=' fileData '图片文件流/param/返回/returnsprivate byte[]ReadFileBytes(Httptedfilebase file data){ byte[]data；使用（流输入流=文件数据InputStream){内存流内存流=InputStream作为内存流；if(内存流==null){内存流=新内存流()；输入流.复制到(内存流)；}数据=内存流.ToArray()；}返回数据；}///摘要///保存文件////summary///param name=' FileExtension '文件扩展名/param///param名称='文件数据'图片二进制文件信息/param/返回/returnsprivate字符串保存文件(字符串fileExtension，byte[]文件数据){字符串结果；请尝试{字符串saveName=Guid .NewGuid().ToString()文件扩展名；//保存文件名称//文件上传后的保存路径字符串基本路径='上传文件字符串保存目录=日期时间.现在。ToString(' yyyy-MM-DD ')；字符串保存路径=系统IO。路径。组合(保存目录，保存名称);字符串服务器目录=系统。输入输出路径组合（服务器. MapPath('~/')、basePath、SaveDir)；if(！系统。存在（服务器目录)){系统。创建目录（服务器目录);}字符串文件=系统IO。路径。组合(服务器目录，保存名称);//保存文件完整路径系统IO。文件。writelbytes(文件NME，文件数据)；//WriteAllBytes创建一个新的文件，按照对应的文件流写入，假如已存在则覆盖//返回完整的图片保存地址结果='/' BasePath '/' SaveDir '/' SaveName；}捕获（异常){结果='发生错误；}返回结果；} }

四、效果图展示：

总结

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