前段时间做物资管理系统,做到尾声发现了一个极好用的插件Layer.js
究其根源发现了Layui。粗略浏览发现简直是为后台程序员而生。如果要快速开发快速上线小型项目。Layui可以说是首选了。
于是给Leader福利了这个玩意。
Leader 听从了我使用Layui的建议,然后让我们使用Layui。
在这之中 发现了Layui使用中的一些坑,做下Mark,以备不测。
引入JS 不多说 js部分如下
<script src="../layui/layui.js"></script>
<script src="../layui/layui.js"></script>
LayUi是个异步加载的过程,加载完成后 在layui.use中写下初始化事件
<script>
layui.use(['layer', 'form','upload'], function(){
var layer = layui.layer,
upload = layui.upload,
,form = layui.form;
//合同文件上传
upload.render({
elem: '.UploadFile' //绑定元素
, before: function (obj) {
layer.load(2); //上传loading
}
, done: function (res, index, upload) {
//上传完毕回调
if (res.src != "" && res.src != null) {
$('#FileName').val(res.name);
$("#FileUrl").val(res.src);
//获取当前触发上传的元素
var items = this.item;
items.hide();
}
}
});
});
</script>
html部分如下
<input id="upload_file" type="button" hidden class="layui-btn layui-btn-sm layui-btn-normal UploadFile" lay-data="{url: '/Management/YunShu/UploadFile',accept: 'file'}" value="选择" title="重复上传会覆盖已有文件" />
c#控制器部分如下
/// <summary>
/// 文件上传
/// </summary>
/// <returns></returns>
public ActionResult UploadFile()
{
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\\Contract";
string filePathName = string.Empty;
string localPath = Path.Combine(HttpRuntime.AppDomainAppPath, local);
var tmpName = Server.MapPath("~/Upload/Contract/");
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 = "上传成功"
});
}
catch {}
return Json(new
{
src = "",
name = "", // 获取文件名不含后缀名
msg = "上传出错"
});
}
如有不对 恳请斧正。
/// <summary>
/// 文件上传
/// </summary>
/// <returns></returns>
public ActionResult UploadFile()
{
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\\Contract";
string filePathName = string.Empty;
string localPath = Path.Combine(HttpRuntime.AppDomainAppPath, local);
var tmpName = Server.MapPath("~/Upload/Contract/");
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 = "上传成功"
});
}
catch {}
return Json(new
{
src = "",
name = "", // 获取文件名不含后缀名
msg = "上传出错"
});
}