演示示例
html
<style>
/*上传图片插件的样式*/
.img-box {
margin-top: 40px;
}
.img-box .up-p {
margin-bottom: 20px;
font-size: 16px;
color: #555;
}
.z_photo {
width: 100%;
padding: 0;
padding-top: 4px;
display: flex;
flex-wrap: wrap;
}
.z_photo .z_file {
position: relative;
float: left;
}
.z_file .file {
width: 130px;
height: 130px;
opacity: 0;
position: absolute;
top: 0px;
left: 0px;
z-index: 100;
}
.z_photo .up-section {
position: relative;
}
.up-section .close-upimg {
display: block;
width: 20px;
height: 20px;
position: absolute;
top: 0px;
right: 0px;
z-index: 10;
background: url(/Content/images/a7.png);
background-size: 100% 100%;
}
.up-section:hover {
border: 1px solid #f15134;
}
.z_photo .up-img {
display: block;
width: 120px;
height: 120px;
}
.loading {
border: 1px solid #D1D1D1;
background: url(/Content/images/loadingNew.gif) no-repeat center;
}
.up-opcity {
opacity: 0;
}
.upimg-div .up-section {
width: 120px;
height: 120px;
margin-left: 1px;
margin-bottom: 1px;
margin-right: 5px;
}
.img-box .upimg-div .z_file {
width: 120px;
height: 120px;
}
.z_file .add-img {
display: block;
width: 120px;
height: 120px;
background-image: url(/Content/images/uploadImg.png);
background-size: 120px;
}
</style>
<div class="z_photo upimg-div clear" id="IntroSection" onclick="openImg('IntroSection')">
@*绑定已有数据时添加*@
@if (!string.IsNullOrEmpty(Model.Intro))
{
foreach (var item in Model.Intro.Split(','))
{
<div class="up-section fl">
<span class="close-upimg"></span>
<img class="up-img" src="@item">
</div>
}
}
<section class="z_file fl IntroFile">
<span class="add-img"></span>
<input type="file" name="file" id="IntroFile" class="file" value="5" accept="image/jpg,image/jpeg,image/png,image/bmp" multiple />
</section>
</div>
<div class="z_photo upimg-div clear" id="ServiceFlowChartSection" onclick="openImg('ServiceFlowChartSection')">
@if (!string.IsNullOrEmpty(Model.ServiceFlowChart))
{
foreach (var item in Model.ServiceFlowChart.Split(','))
{
<div class="up-section fl">
<span class="close-upimg"></span>
<img class="up-img" src="@item">
</div>
}
}
<section class="z_file fl ServiceFlowChartFile">
<span class="add-img"></span>
<input type="file" name="file" id="ServiceFlowChartFile" class="file" value="15" accept="image/jpg,image/jpeg,image/png,image/bmp" multiple />
</section>
</div>
<script src="imgUpload.js"></script>
<script>
//获取上传图片src
function getImag() {
var intro = $("#IntroSection img");
var introImg = [];
for (var i = 0; i < intro.length; i++) {
introImg.push(intro[i].src)
}
return introImg;
}
//查看大图
function openImg(name) {
}
</script>
注意id与class样式名一致
imgUpload.js
$(function () {
enter_imgTotal = []; //上传的图片arr
var fileList = [];
// 图片上传*****************************************
var delParent;
var defaults = {
fileType: ["jpg", "png", "bmp", "jpeg"], // 上传文件的类型
fileSize: 1024 * 1024 * 10 // 上传文件的大小 10M
};
/*点击图片的文本框*/
$(".file").change(function () {
var idFile = $(this).attr("id");
var valueFile = $(this).attr("value");//图片上传最大值
var file = document.getElementById(idFile);
var imgContainer = $(this).parents(".z_photo"); //存放图片的父亲元素
fileList = file.files; //获取的图片文件
//遍历得到的图片文件
var numUp = imgContainer.find(".up-section").length;
var totalNum = numUp + fileList.length; //总的数量
if (fileList.length > valueFile || totalNum > valueFile) {
alert("上传图片数目不可以超过" + valueFile + "个,请重新选择"); //一次选择上传超过5个 或者是已经上传和这次上传的到的总数也不可以超过5个
} else if (numUp < valueFile) {
fileList = validateUp(fileList);
enter_imgTotal.push(fileList);
if (fileList.length != 0) {
UploadFile(fileList, idFile);
}
}
setTimeout(function () {
$(".up-section").removeClass("loading");
$(".up-img").removeClass("up-opcity");
}, 450);
numUp = imgContainer.find(".up-section").length;
if (numUp >= valueFile) {
$(this).parent().hide();
}
});
$(".z_photo").delegate(".close-upimg", "click", function () {
delParent = $(this).parent();
var numUp = delParent.siblings().length;
if (enter_imgTotal.length != 0) {
var aa = delParent.index();
var delimg_index = enter_imgTotal[0].length - aa - 1;
enter_imgTotal[0].splice(delimg_index, 1); //删除掉数组对应的图片
}
//上传图片最多15张
if (numUp < 16) {
delParent.parent().find(".z_file").show();
}
delParent.remove();
});
function validateUp(files) {
var arrFiles = []; //替换的文件数组
for (var i = 0, file; file = files[i]; i++) {
//获取文件上传的后缀名
var newStr = file.name.split("").reverse().join("");
if (newStr.split(".")[0] != null) {
var type = newStr.split(".")[0].split("").reverse().join("");
if (jQuery.inArray(type, defaults.fileType) > -1) {
// 类型符合,可以上传
if (file.size >= defaults.fileSize) {
alert(file.size);
alert('您这个"' + file.name + '"文件大小过大');
} else {
// 在这里需要判断当前所有文件中
arrFiles.push(file);
}
} else {
alert('您这个"' + file.name + '"上传类型不符合');
}
} else {
alert('您这个"' + file.name + '"没有类型, 无法识别');
}
}
return arrFiles;
}
function UploadFile(fileList, idFile) {
//图片批量上传
var formData = new FormData();
for (let i in fileList) {
formData.append("files", fileList[i]);
}
$.ajax({
type: "POST",
url: "/Common/HonorUpload",
async: false,
//beforeSend: function (request) {
// request.setRequestHeader("Authorization", '123');
//},
data: formData,
cache: false, //上传文件不需要缓存
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success: function (res) {
var result = JSON.parse(res);
if (result.success == true) {
var arr = result.imageUrl.split(',');
var imgContainer = $("." + idFile); //存放图片的元素
for (var i = 0; i < arr.length; i++) {
//拼接图片
//var imgUrl = window.URL.createObjectURL(fileList[i]);
//imgArr.push(imgUrl);
var $div = $("<div class='up-section fl loading'>");
imgContainer.before($div);
var $img0 = $("<span class='close-upimg'>");
$img0.appendTo($div);
var $img = $("<img class='up-img up-opcity'>");
$img.attr("src", arr[i]);
$img.appendTo($div);
}
} else {
alert("图片上传失败");
return false;
}
},
error: function () {
alert(res.message)
}
});
}
})
后端接口
[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");
}
}