一. form 提交图片修改enctype="multipart/form-data"
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="/layui/css/layui.css" rel="stylesheet" />
<script src="../inc/jquery/jquery-1.9.1.min.js"></script>
<script src="/layui/layui.js"></script>
<style type="text/css">
.uploader-list .file-iteme {
margin: 12px 0 0 15px;
padding: 1px;
float: left;
}
</style>
</head>
<body style="min-width:950px; overflow:auto;">
<div id="w_doc">
<div id="main">
<div class="info">
<form action="" enctype="multipart/form-data" method="post" id="subfrm" name="subfrm">
<input type="hidden" id="subflag" name="subflag" value="1" />
<table class="tbinfo" width="100%">
<tr>
<td class="tdleft">轮播图上传：</td>
<%-- <td>
<input type="text" maxlength="64" id="version" name="version" value="<%=version %>" /></td>--%>
</tr>
<tr>
<td class="tdleft"></td>
<td>
<div style="border: 0px solid red; height: 40px; width: 800px;">
<div style="float: left;">
<button type="button" class="layui-btn layui-bg-gray " id="test2" runat="server">请选择上传图片</button>
</div>
<div style="float: left; font-size: 18px; line-height: 38px; height: 38px; margin-left: 20px;">建议图片大小：365*113</div>
<div style="float: left; font-size: 18px; line-height: 38px; height: 38px; margin-left: 20px;">支持格式：(jpg|gif|bmp|jpeg|png)</div>
</div>
<div style="width: 800px; ">
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
<div class="layui-upload-list uploader-list" style="overflow: auto;" runat="server" id="img">
</div>
</blockquote>
</div>
</td>
</tr>
<tr>
<td class="tdleft"></td>
<td>
<div class="btnsub fl">
<a href="javascript:subForm();" id="btn">保 存</a>
</div>
<div class="btn fl">
<a href="#">取 消</a>
</div>
</td>
</tr>
<tr>
<td></td>
<td id="error" runat="server" style="color: #f00"></td>
</tr>
</table>
</form>
</div>
</div>
</div>
<div id="pageEndScirpt" runat="server"></div>
<script type="text/javascript">
//var formData = new FormData($("#subfrm"));
layui.use('upload', function () {
var $ = layui.jquery
, upload = layui.upload;
//多图片上传
upload.render({
elem: '#test2'
, url: ''
, multiple: true
,auto:false
, bindAction: ""
, number: 5
, choose: function (obj) {
var files = this.files = obj.pushFile();
$("#img").html("");
//formData.append("files", files);
//预读本地文件示例，不支持ie8
obj.preview(function (index, file, result) {
$('.uploader-list').append(
'<div id="" class="file-iteme">' +
'<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" style="width:100%;height:100%;">' +
'</div>'
)
});
}
, done: function (res) {
//上传完毕
layer.msg(res["msg"]);
//setTimeout("location.reload()", 1000);
}
});
})
function subForm() {
$("#subfrm").submit();
}
</script>
</body>
</html>
二 .cs
public void BindData()
{
img.InnerHtml = "";
OrderConfig orderConfig = new OrderConfig();
OrderConfig model = orderConfig.GetOrderConfigModelByWebappid(webappid);
if (model != null)
{
bannerImg = model.BannerImg;
if (!string.IsNullOrEmpty(bannerImg))
{
string[] bannerImgList = bannerImg.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
if (bannerImgList.Length > 0)
{
foreach (var item in bannerImgList)
{
img.InnerHtml += @"<div class='file-iteme'>
<img src='/" + item.ToString() + "' class='layui-upload-img' style='width:100%;he:100%;'></div>";
}
}
else
{
img.InnerHtml = "";
}
}
}
}
public void Submit()
{
string msg = "";
string dateFilePath = "";
Dal.D_Wx_OrderConfig orderConfig = new Dal.D_Wx_OrderConfig();
List<string> fileNameList = new List<string>();
bool updateFlag = false;
string filepath = "";
string dateFilePathValue = "images/orderBannerImg/" + webappid + "/";
List<HttpPostedFile> fileInfo = new List<HttpPostedFile>();
if (Request["subflag"] == "1")
{
phone = Request["phone"].Trim();
if (string.IsNullOrEmpty(phone))
{
msg = "请输入联系方式";
}
Regex reg = new Regex(@"^((0\d{2,3}-\d{7,8})|(1[345789]\d{9}))$");
Regex regs = new Regex(@"^(\d{3,4}-)?\d{6,8}$");
if (reg.IsMatch(phone) || regs.IsMatch(phone))
{
}
else
{
msg = "请输入合法联系方式";
}
if (string.IsNullOrEmpty(msg))
{
#region 当上传图片不为空时更新
if (Request.Files.Count > 0)
{
System.Web.HttpFileCollection files = Request.Files;
for (int i = 0; i < files.Count; i++)
{
System.Web.HttpPostedFile file = files[i];
if (!string.IsNullOrEmpty(file.FileName))//判断当前图片名字是否为空
{
string type = file.FileName.Substring(file.FileName.LastIndexOf(".") + 1).ToLower(); //获取图片类型判断是否合法
if (type == "bmp" || type == "jpg" || type == "gif" || type == "png" || type == "jpeg")
{
if (file.ContentLength < 5242880)//判断当前图片不能大于5M
{
string fileName = file.FileName;
filepath = AppDomain.CurrentDomain.BaseDirectory + "images\\orderBannerImg\\" + webappid + ""; //文件路径
if (!Directory.Exists(filepath))
{
Directory.CreateDirectory(filepath);
}
fileInfo.Add(file);
}
else
{
msg = "上传图片不合法请重新上传";
break;
}
}
else
{
msg = "上传图片不合法请重新上传";
break;
}
}
else
{ //当图片数量大于0 且图片名字为空时判断是添加还是修改
if (!orderConfig.GetOrderConfigByWebappid(webappid))
{
updateFlag = true;
}
else
{
msg = "上传图片不能为空";
}
}
}
}
if (updateFlag)//当前没图片执行修改信息操作
{
if (orderConfig.UpdateOrderConfig(webappid, bannerImg, name, phone, notice, openFlag))
{
msg = "修改配置信息成功"; ;
}
else
{
msg = "修改配置信息失败";
}
}
else
{ //当前没有图片执行添加信息上传图片操作
if (fileInfo.Count > 0)
{
if (string.IsNullOrEmpty(msg))
{
try
{
for (int i = 0; i < fileInfo.Count; i++)
{
dateFilePath += dateFilePathValue + fileInfo[i].FileName + ",";
if (!File.Exists(filepath + "\\" + fileInfo[i].FileName))
{
fileInfo[i].SaveAs(filepath + "\\" + fileInfo[i].FileName);
}
fileNameList.Add(fileInfo[i].FileName);
}
}
catch (Exception ex)
{
msg = "上传图片异常";
}
if (string.IsNullOrEmpty(msg))
{
if (orderConfig.GetOrderConfigByWebappid(webappid))
{
if (orderConfig.AddOrderConfig(webappid, dateFilePath, name, phone, notice, openFlag))
{
msg = "添加配置信息成功";
}
else
{
msg = "添加配置信息失败";
}
}
else
{
if (orderConfig.UpdateOrderConfig(webappid, dateFilePath, name, phone, notice, openFlag))
{
msg = "修改配置信息成功";
}
else
{
msg = "修改配置信息成失败";
}
}
//判断当前图片文件集合与文件名集合是否一致，将不一致的图片删除
if (fileInfo.Count == fileNameList.Count)
{
if (fileNameList.Count > 0)
{
DirectoryInfo di = new DirectoryInfo(filepath);
FileInfo[] fi = di.GetFiles();
for (int j = 0; j < fi.Length; j++)
{
if (!fileNameList.Exists(t => t == fi[j].Name))
{
File.Delete(fi[j].FullName);
}
}
}
}
}
}
else
{
msg = "上传图片不能为空";
}
}
}
#endregion
BindData();
}
this.pageEndScirpt.InnerHtml = PagePub.AlertToParentJs(msg, "");
}
}
为什么要用form提交文件呢？layui上传多张图片时，图片会一张一张传，想将图片路径保存数据库时操作不太理想，当然怎么样都能实现想要的操作。加油~~
3146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
