layui之图片上传

前言：个人转码小说网站：友书-绿色、纯净、无广告，欢迎广大小说阅读爱好者同行来本网站看小说，书友交流群：580462139（群主及管理均为资深90后程序猿哦）

前言：

layui是一套非常棒的前端框架，使用它可以为我们省掉大量在前端UI布局、调整上花的时间，但是layui官方文档上面只显示了前端部分代码，与后台做交互的部分是没有，以下就为大家讲解如何使用layui图片上传控件

前台代码：

   <div class="layui-upload"><div class="col-sm-1"> </div><div class="col-sm-2"><button type="button" class="layui-btn" id="test1">上传图片</button></div><div class="col-sm-6"><div class="layui-upload-list"><img class="layui-upload-img"  id="demo1" style="width:580px;height:100px;"><p id="demoText" ></p><input name="B_Url" type="hidden" value=""/></div></div></div><script>layui.use('upload', function () {var $ = layui.jquery, upload = layui.upload;var uploadInst = upload.render({elem: '#test1', url: 'upload', before: function (obj) {obj.preview(function (index, file, result) {$('#demo1').attr('src', result);});}, done: function (res) {if (res.code > 0) {return layer.msg('上传失败');}layer.msg(res.msg, { icon: 6, time: 1000 });}, done: function (fileName) {$('[Name=B_Url]').val(fileName.src);}, error: function () {var demoText = $('#demoText');demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');demoText.find('.demo-reload').on('click', function () {uploadInst.upload();});}});});var b_Type = $('[name="B_Type"]').val();alert(b_Type);
</script>

其中,后台向前端传回的返回值集合为res，传回的详细信息为：src、name、msg、filename，具体需要哪些参数，可以自行修改后台部分代码，

后台代码：

  /// <summary>/// layui图片上传demo/// </summary>/// <returns></returns>[HttpPost]public ActionResult upload(){try{var file = Request.Files[0];var filecombin = file.FileName.Split('.');if (file == null || String.IsNullOrEmpty(file.FileName) || file.ContentLength == 0 || filecombin.Length < 2){return Json(new{fileid = 0,src = "",name = "",msg = "上传出错 请检查文件名 或 文件内容"});}//定义本地路径位置string local = "Upload\\" + System.DateTime.Now.ToString("yyyy-MM-dd");string filePathName = string.Empty;string localPath = Path.Combine(HttpRuntime.AppDomainAppPath, local);var tmpName = Server.MapPath("~/Upload/" + System.DateTime.Now.ToString("yyyy-MM-dd") + "/");var tmp = file.FileName;var tmpIndex = 0;//判断是否存在相同文件名的文件 相同累加1继续判断while (System.IO.File.Exists(tmpName + tmp)){tmp = filecombin[0] + "_" + ++tmpIndex + "." + filecombin[1];}//不带路径的最终文件名filePathName = tmp;if (!System.IO.Directory.Exists(localPath))System.IO.Directory.CreateDirectory(localPath);string localURL = Path.Combine(local, filePathName);file.SaveAs(Path.Combine(localPath, filePathName));   //保存图片（文件夹）return Json(new{src = localURL.Trim().Replace("\\", "/"),name = Path.GetFileNameWithoutExtension(file.FileName),   // 获取文件名不含后缀名msg = "上传成功",fileName = System.DateTime.Now.ToString("yyyy-MM-dd") + "/" + filePathName//最终返回的路径及文件名称});}catch { }return Json(new{src = "",name = "",   // 获取文件名不含后缀名msg = "上传出错",fileName=""});}

以上，为layui图片上传的一个简单demo

联系方式：

wechat&QQ&Tel：13501715983（如查不到请加QQ：631931078或352167311）

个人邮箱：13212644043@163.com

如有问题或改进地方请多多指点，本文为个人原创，转载请加以说明

layui之图片上传相关推荐

ThinkPHP5整合LayUI编辑器图片上传
2019独角兽企业重金招聘Python工程师标准>>> 一.创建上传方法 public function uploadimg(){$image = $_FILES['file'];$ ...
php 多图上传编辑器,ThinkPHP5整合LayUI编辑器图片上传
一.创建上传方法 public function uploadimg() { $image = $_FILES['file']; $filebase = file_get_contents($imag ...
.net mvc + layui做图片上传（二）—— 使用流上传和下载图片
摘要:上篇文章写到一种上传图片的方法,其中提到那种方法的局限性,就是上传的文件只能保存在本项目目录下,在其他目录中访问不到该文件.这与浏览器的安全性机制有关,浏览器不允许用户用任意的路径访问服务器上的 ...
layui上传图片列表展示_ThinkPHP5+Layui实现图片上传加预览功能
html代码上传封面 js代码 var uploadInst = upload.render({ elem:'#cover' ,url:'addCourse' ,accept:'file' // 允 ...
.Net之Layui多图片上传
前言: 多图上传在一些特殊的需求中我们经常会遇到,其实多图上传的原理大家都有各自的见解.对于Layui多图上传和我之前所说的通过js获取文本框中的文件数组遍历提交的原理一样,只不过是Layui中的up ...
layui：图片上传
Layui文件上传 layui官网:https://www.layui.com/ layui插件下载官方文档(关于文件上传) 快速入门前端 1. index页面,引入css样式和js脚本 < ...
ASP.NET MVC +Layui 实现图片上传功能
ASP.NET MVC +Layui 实现图片上传功能这是一个前端的添加功能只展示图片添加的前端代码 <div class="layui-upload"> < ...
layui 实现图片上传和预览
[学习笔记] 图片不自动上传并在表单提交时再上传,看代码. 附上表单页面前台实现 <#--图片名--> <input id="fileName" type=&q ...
layui 多图片上传
效果如下: 入口 <div class="layui-form-item"><div class="layui-upload" style=& ...

layui之图片上传

layui之图片上传相关推荐

最新文章

热门文章