演示示例
html
<link href="layui/css/layui.css" rel="stylesheet" />
<script src="layui/layui.js"></script>
<script src="Scripts/jquery.min.js"></script>
<div class="layui-upload">
<button type="button" class="layui-btn" id="ID-upload-demo-btn-2">
<i class="layui-icon layui-icon-upload"></i> 多图片上传
</button>
<button type="button" class="layui-btn" onclick="uploadImg()">开始上传</button>
<button type="button" class="layui-btn" onclick="getUploadSrc()">获取已上传图片数据</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
预览图:
<div class="layui-upload-list" id="upload-demo-preview">
</div>
</blockquote>
</div>
<div>
已上传图片:
<div id="uploadResult" onclick="openImg('uploadResult')"></div>
</div>
<style>
.imgDiv {
position: relative;
background-color: #fbfdff;
border: 1px dashed #c0ccda;
border-radius: 6px;
display: inline-block;
}
.handleDiv {
position: absolute;
width: 100%;
height: 100%;
z-index: 100;
border-radius: 6px;
top: 0;
background: rgba(59, 60, 61, 0.6);
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.handleDiv .iconI {
z-index: 999;
transition: all .3s;
cursor: pointer;
font-size: 25px;
color: rgba(255, 255, 255, 0.91);
margin: 0 4px;
display: block;
width: 25px;
height: 25px;
line-height: 25px;
}
</style>
js
<script>
$(document).on("mouseenter", ".imgDiv", function () {
$(this).find('div:first').removeClass('layui-hide');
}).on("mouseleave", ".imgDiv", function () {
$(this).find('div:first').addClass('layui-hide');
});
var files;
layui.use(function () {
var upload = layui.upload;
var $ = layui.$;
upload.render({
elem: '#ID-upload-demo-btn-2',
acceptMime: 'image/*',
multiple: true,
auto: false,
choose: function (obj) {
var imgs = $('[id^=imgDiv]');
var imgLength = imgs.length + obj.resetFile.length;
if (imgLength > 5) {
alert("最多上传5张");
return false;
} else {
files = obj.pushFile();
obj.preview(function (index, file, result) {
var idName = "imgDiv";
$('#upload-demo-preview').append('<div class="imgDiv" id="' + idName + index + '"><img src="' + result + '" alt="' + file.name + '" style="width: 90px; height: 90px;"><div class="handleDiv layui-hide" id="handle' + index + '"><i class="layui-icon iconI" οnclick="removeImg(\'' + idName + index + '\',\'' + index + '\')"></i></div></div>');
});
}
},
});
});
function uploadImg() {
if (Object.keys(files).length == 0) {
alert("请选择图片上传");
return false;
}
var formData = new FormData();
for (let i in files) {
formData.append("files", files[i]);
}
$.ajax({
type: 'POST',
url: "/Common/HonorUpload",
data: formData,
processData: false,
contentType: false,
async: false,
dataType: "json",
success: function (result) {
if (result.success == true) {
var arr = result.imageUrl.split(',');
for (let i in files) {
delete files[i];
var num = i.split('-')[1];
$('#uploadResult').append('<img id="upload' + i + '" src="' + arr[num] + '" style="width: 90px; height: 90px;">');
}
} else {
alert("图片上传失败");
return false;
}
}
});
}
function getUploadSrc() {
var imgs = $('[id^=upload]');
var imgArray = [];
imgs.each(function () {
var url = $(this).attr('src');
if (url) {
imgArray.push(url);
}
});
alert(JSON.stringify(imgArray));
return false;
}
function removeImg(imgDivId, index) {
delete files[index];
$("#" + imgDivId).remove();
$("#upload" + index).remove();
return false;
}
function openImg(name) {
layui.use(['layer'], function () {
var layer = layui.layer;
layer.photos({
photos: '#' + name,
anim: 5
});
});
}
</script>
后端接口
[HttpPost]
public ActionResult HonorUpload()
{
try
{
Stream stream;
string fileName;
List<string> ImageUrls = new List<string>();
for(var i=0;i<Request.Files.Count;i++)
{
HttpPostedFileBase httpPostedFile = Request.Files[i];
if (httpPostedFile == null)
throw new ArgumentException("没有选择上传文件");
stream = httpPostedFile.InputStream;
fileName = Path.GetFileName(httpPostedFile.FileName);
var ext = (string.IsNullOrEmpty(fileName) || fileName.IndexOf('.') == -1)
? ""
: fileName.Substring(fileName.LastIndexOf('.') + 1).ToLower();
var key = "xiang/" + DateTime.Now.ToString("yyyyMMddHHmmss") + new Random().Next(100, 999).ToString("") +
"." + ext;
var url = Comm.UploadToOss(key, stream);
ImageUrls.Add(url);
}
return Json(new { success = true, imageUrl = string.Join(",",ImageUrls) }, "text/plain");
}
catch (Exception ex)
{
return Json(new { success = false, error = ex.Message }, "text/plain");
}
}