.Net之Layui多图片上传

  多图上传在一些特殊的需求中我们经常会遇到,其实多图上传的原理大家都有各自的见解。对于Layui多图上传和我之前所说的通过js获取文本框中的文件数组遍历提交的原理一样,只不过是Layui中的upload.render方法已经帮我们封装好了,我们只管调用即可,也就是说你选中了几张图片,那么将会向后台请求与图片张数相同的次数,即为遍历提交的方式。

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

一、引入Layui.cs和Layui.js

需要本地项目中存在layui相关样式和js,非网络地址 

 <link href="http://res.layui.com/layui/dist/css/layui.css"  media="all">

 <script src="http://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>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpwfgf.html