layui的图片上传使用
Posted bklsj
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了layui的图片上传使用相关的知识，希望对你有一定的参考价值。
先上效果图。虽然还是有点BUG明天再调
在用之前呢，你得先更新最新版的layui版本。经验之谈_(:_」∠)_
今天在用的时候，实在是碰到太多的坑，本来是拒绝更新到最新版来着。
首先是layui.js和layui.all.js的问题。这个是什么问题呢！就是layui.js没有upload.render方法
_(:_」∠)_ _(:_」∠)_ _(:_」∠)_
于是就在百度搜索了：“layui.js is not found reder” 有答案说用layui.all.js
然后引用layui.all.js，而layui.all.js有render方法却不会触发<input type=file的上传功能。(吐血一波)(￣ー￣)
然后走神了下百度了 “layui.js和layui.all.js的区别” ，然后也不知道怎么回事，反正莫名其妙好了。
好的，那么我就继续往下。上传之后图片不预览出来。这是自己傻逼，被搞懵了，只是一个layuihide样式没删掉，又吐血一波（楼主最近补血嫌血多，多糖铁复合胶囊、生血宁片，你值得拥有）
就这么用了测试几回后.......打开windows的upload功能(其实就是<input type=file>打开的那个弹窗)没用了，回想起来可能是缓存还是怎么滴吧。哎呀，反正也不写废话了，中间的波折也就过了。
好，一个上午就这么没了。
下午上班，更新了最新版后。导入layui.js和 layui/lay/modules/upload.js（我也忘记有没有用了，反正就导了）完美，不会出现上午的问题了。人呐就是这么傻，能简单解决的非得找原因解决。
接下来是编写后台、写样式、js调试、添加删除按钮以及删除功能。layui图片上传是没用删除按钮的，除非是表格式的，不过区别也不大，只是不太好看。
编写传到mvc控制器的后台,emm
public class UploadFileController : MvcControllerBase
{
public ActionResult UploadImg() {
string resultUrl = "";
for (int i = 0; i < Request.Files.Count; i++)
{
resultUrl += Upload(Request.Files[i]);
if (i<Request.Files.Count-1)
{
resultUrl += ",";
}
}
return Success("上传成功", resultUrl);
}
private string Upload(HttpPostedFileBase postedFile) {
UploadFiles uf = new UploadFiles();
string filepath = "images\\Goods\\";
string path = GetMapPath(filepath);//UploadFile/images/goods/
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}
var filelength = postedFile.ContentLength;
string fileExt = GetPostfixStr(postedFile.FileName);
var fileMaxSize = 307200; //300K
var fileName = Guid.NewGuid() + "." + fileExt; //返回的上传后的文件名
string resultUrl = Config.GetValue("ServerIpHost") + "/UploadFile/images/Goods/" + fileName;//存入数据库的链接
if (filelength <= fileMaxSize)
{
byte[] buffer = new byte[filelength];
postedFile.InputStream.Read(buffer, 0, filelength);
postedFile.SaveAs(path + fileName);
}
return resultUrl;
}
/// <summary>
/// 获取文件格式名
/// </summary>
/// <param name="filename"></param>
/// <returns></returns>
private string GetPostfixStr(string filename)
{
int start = filename.LastIndexOf(".");
int length = filename.Length;
string postfix = filename.Substring(start + 1);
return postfix;
}
public string GetMapPath(string strPath)
{
if (System.Web.HttpContext.Current != null)
{
return System.Web.HttpContext.Current.Server.MapPath(strPath);
}
else //非web程序引用
{
strPath = strPath.Replace("/", "\\");
if (strPath.StartsWith("\\"))
{
strPath = strPath.Substring(strPath.IndexOf(‘\\‘, 1)).TrimStart(‘\\‘);
}
return System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory, strPath);
}
}
}
写了两个图片上传，一个是多图，一个是单图
layui.use([‘form‘, ‘upload‘, ‘element‘], function () { var form = layui.form , layer = layui.layer; var upload = layui.upload; var element = layui.element; var $ = layui.jquery; //拖拽上传 var uploadMain = upload.render({ elem: ‘#test10‘ , url: ‘/UploadFile/UploadImg‘ //改成您自己的上传接口 //, before: function (obj) {//上传前触发 // //预读本地文件示例，不支持ie8 // obj.preview(function (index, file, result) { // layui.$(‘#uploadDemoView‘).removeClass(‘layui-hide‘).find(‘img‘).attr(‘src‘, result); // //$(‘#demo2‘).attr(‘src‘, result); //图片链接（base64） // }); //} , choose: function (obj) {//选择后触发 var files = this.files = obj.pushFile(); var view = layui.$(‘#uploadDemoView‘); //预读本地文件示例，不支持ie8 obj.preview(function (index, file, result) { var _html = $([‘<div class="divimg" style="float:left;">‘ , ‘<img style="max-width: 196px;max-height:200px" id="viewImg‘ + index + ‘" alt="上传成功后渲染" src="‘ + result + ‘">‘ , ‘<div class="divX" >‘ , ‘<img src = "/Content/images/ui_close.png" width = "20" height = "20" />‘ , ‘</div>‘ , ‘</div>‘].join(‘‘)); _html.find(".divX").on(‘click‘, function () { delete files[index]; //删除对应的文件 _html.remove(); uploadDetail.config.elem.next()[0].value = ‘‘; }) layui.$(‘#uploadDemoView‘).removeClass(‘layui-hide‘); view.removeClass(‘layui-hide‘); _html.find(".divX").on(‘click‘, function () { delete files[index]; //删除对应的文件 _html.remove(); uploadDetail.config.elem.next()[0].value = ‘‘; }) view.append(_html); }); } , auto: false//false将不触发before //, bindAction: "#uploadBtn" , size: 300//单位kb , done: function (data) { if (data.message != "") { layer.msg(data.message); } if (data.type == 1) { var fileUrl = data.resultdata; $("input[name=‘mainPic‘]").val(fileUrl); } else if (data.type == 3) { return false; } } , progress: function (n, elem) { var percent = n + ‘%‘ //获取进度百分比 element.progress(‘lodingdemo‘, percent); //可配合 layui 进度条元素使用 } }); var uploadDetail; //拖拽上传 uploadDetail = upload.render({ elem: ‘#upDiv2‘ , url: ‘/UploadFile/UploadImg‘ //改成您自己的上传接口 , choose: function (obj) {//选择图片后触发 var files = this.files = obj.pushFile();//每次会把新图片加入集合
//-----------------图片数量限制 var filecount = Object.getOwnPropertyNames(files).length;//这里就不说，做图片数量限制 if (filecount > 4) { layer.msg("只能上传4张"); var fileobj = Object.getOwnPropertyNames(files)// $(fileobj).each(function (i, j) {//删除本次添加的图片，不删的话 if (i > 3) { delete files[j]; } }) return false; }
//---------------------------- var view2 = layui.$(‘#uploadDemoView2‘); //预读本地文件示例 obj.preview(function (index, file, result) { var _html = $([‘<div class="divimg" style="float:left;">‘ , ‘<img style="max-width: 196px;max-height:200px" id="viewImg‘ + index + ‘" alt="上传成功后渲染" src="‘ + result + ‘">‘ , ‘<div class="divX" >‘ , ‘<img src = "/Content/images/ui_close.png" width = "20" height = "20" />‘ , ‘</div>‘ , ‘</div>‘].join(‘‘)); view2.removeClass(‘layui-hide‘); _html.find(".divX").on(‘click‘, function () { debugger; delete files[index]; //删除对应的文件 _html.remove(); uploadDetail.config.elem.next()[0].value = ‘‘; }) view2.append(_html); }); } , multiple: true // , number: 4//这个是限制一次性选择4张图片 反正就不能用，没卵用 , auto: false//false将不触发before , size: 300//单位kb , done: function (data) { if (data.message != "") { layer.msg(data.message); } if (data.type == 1) { var fileUrl = data.resultdata; $("input[name=‘detailPic‘]").val(fileUrl); } else if (data.type == 3) { return false; } } //, error: function (index, upload) { // //当上传失败时，你可以生成一个“重新上传”的按钮，点击该按钮时，执行 upload() 方法即可实现重新上传 //} , progress: function (n, elem) { var percent = n + ‘%‘ //获取进度百分比 element.progress(‘lodingdemo2‘, percent); //可配合 layui 进度条元素使用 } }); $("#uploadBtn").click(function () { uploadMain.upload(); uploadDetail.upload(); return false; }) //自定义验证规则
//监听提交 //表单取值 });
<style type="text/css"> .divX { position: absolute; top: 0px; right: 0px; text-align: right; padding-right: 3px; z-index: 200; -moz-border-radius: 20px; -webkit-border-radius: 20px; line-height: 10px; font-weight: bold; cursor: pointer; font-size: 10px; } .divimg { max-height: 220px; height: 220px; width: 258px; max-width: 258px; background-color: #fff; border: 1px dashed #e6e6e6; position: relative; text-align: center; } .divimg > img { padding-top: 10px; } </style> <form class="layui-form layui-form-pane" lay-filter="example"> <input type="hidden" name="mainPic" /> <input type="hidden" name="detailPic" /> <div class="layui-form-item"> <button class="layui-btn layui-btn-normal layui-btn-radius" id="uploadBtn" lay-submit="">开始上传</button> </div> <div class="layui-form-item"> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>上传主图(300kb内)</legend> </fieldset> <div class="layui-upload-drag" id="test10"> <div class="layui-progress" lay-filter="lodingdemo" lay-showpercent="true"> <div class="layui-progress-bar" lay-percent="0%"></div> </div> <i class="layui-icon"></i> <p>点击上传，或将文件拖拽到此处</p> <hr /> </div> <div class="layui-hide" id="uploadDemoView"> @*<img style="max-width: 196px;max-height:200px" id="demo2" alt="上传成功后渲染" lay-filter="imgfilter" src=""> <div class="divX " onclick="del(this)"> <img src="~/Content/images/ui_close.png" width="20" height="20" /> </div>*@ </div> </div> <div class="layui-form-item"> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>上传详情页(300kb内,最多4张)</legend> </fieldset> <div class="layui-upload-drag" id="upDiv2"> <div class="layui-progress" lay-filter="lodingdemo2" lay-showpercent="true"> <div class="layui-progress-bar" lay-percent="0%"></div> </div> <i class="layui-icon"></i> <p>点击上传，或将文件拖拽到此处</p> <hr> </div> <div class="layui-hide" id="uploadDemoView2"> </div> </div> </form>
以上是关于layui的图片上传使用的主要内容，如果未能解决你的问题，请参考以下文章