C# 文件上传
<script>
var imgFile = []; //文件流
var imgSrc = []; //图片路径
var imgName = []; //图片名字
var imgId = [];//后端返回的图片主键
let imageList = @Html.Raw(Json.Encode(@ViewBag.Image));
if (imageList.length > 0) {
console.info(imageList)
for (var item = 0; item < imageList.length; item++) {
imgSrc.push(imageList[item].PictureUrl);
imgId.push(imageList[item].Id);
//下面两个字段随便存啥，只有与后端返回的数组长度一致即可，用于占位方便前端的假删除
imgFile.push(imageList[item].Id);
imgName.push(imageList[item].Id);
}
var imgBox = '.content-img-list';
addNewContent(imgBox);
console.log("=====赋值后", imgSrc)
console.log("=====赋值后图片id", imgId)
} else {//只有当后台存在数据才显示打印
var div = document.getElementById("printPic");
div.setAttribute("style", "display:none");
}
$(function () {
// 鼠标经过显示删除按钮
$('.content-img-list').on('mouseover', '.content-img-list-item', function () {
$(this).children('div').removeClass('hide');
});
// 鼠标离开隐藏删除按钮
$('.content-img-list').on('mouseleave', '.content-img-list-item', function () {
$(this).children('div').addClass('hide');
});
// 单个图片删除
$(".content-img-list").on("click", '.content-img-list-item a .gcllajitong', function () {
var index = $(this).parent().parent().parent().index();
console.log("触发删除==》", index)
if (imgId.length > 0) {//证明存在后端图片
console.log("存在需要删除的后端图片")
if (imgId[index]) {
console.log("执行删除后端")
removeImg(imgId[index], index)
}
}
console.log("执行删除前端")
imgSrc.splice(index, 1);
imgFile.splice(index, 1);
imgName.splice(index, 1);
var boxId = ".content-img-list";
addNewContent(boxId);
});
$(".content-img-list").on("click", '.content-img-list-item a .gclfangda', function () {
var index = $(this).parent().parent().parent().index();
$(".modal-content").html("");
var bigimg = $(".modal-content").html();
$(".modal-content").html(bigimg + '<div class="show"><img src="' + imgSrc[index] + '" alt="" style="width:96%;height:100%"><div>');
});
});
//图片上传
$('#upload').on('change', function (e) {
var imgSize = this.files[0].size;
if (imgSize > 1024 * 1024 * 1) { //1024kb*1024K=1M
return alert("上传图片不能超过1M");
};
if (this.files[0].type != 'image/png' && this.files[0].type != 'image/jpeg' && this.files[0].type != 'image/gif') {
return alert("图片上传格式不正确");
}
var imgBox = '.content-img-list';
var fileList = this.files;
for (var i = 0; i < fileList.length; i++) {
var imgSrcI = getObjectURL(fileList[i]);
imgName.push(fileList[i].name);
imgSrc.push(imgSrcI);
imgFile.push(fileList[i]);
}
addNewContent(imgBox);
this.value = null; //上传相同图片
});
//提交请求
$('#btn-submit-upload').on('click', function () {
// FormData上传图片
var formFile = new FormData();
// 遍历图片imgFile添加到formFile里面
$.each(imgFile, function (i, file) {
formFile.append('myFile['+i+']', file);
});
$.ajax({
url: '/T_TaskMian/AddFile?Pid='+@ViewBag.PId,
type: 'POST',
data: formFile,
async: true,
cache: false,
contentType: false,
processData: false,
dataType: 'json',
success: function (res) {
console.log(res);
if (res.data == 200) {
alert("保存成功")
location.reload();
//$("#adviceContent").val("");
// $("#contact").val("");
} else {
alert(res.msg);
location.reload();
//$('.content-img .file').show();
//$("#adviceContent").val("");
//$("#cotentLength").text("0/240");
//$("#contact").val("");
//imgSrc = []; imgFile = []; imgName = [];
//addNewContent(".content-img-list");
}
}
})
});
//删除后端
function removeImg(obj, index) {
$.ajax({
url: '/T_TaskMian/DeleteFile?Id='+obj,
type: 'GET',
async: true,
cache: false,
contentType: false,
processData: false,
success: function (res) {
console.log(res);
if (res.data == 200) {
alert("成功删除！")
location.reload();
} else {
alert(res.msg);
location.reload();
}
}
});
}
//图片展示
function addNewContent(obj) {
// (imgSrc)
$(obj).html("");
for (var a = 0; a < imgSrc.length; a++) {
var oldBox = $(obj).html();
$(obj).html(oldBox + '<li class="content-img-list-item"><img src="' + imgSrc[a] + '" alt="">' +
'<div class="hide"><a index="' + a + '" class="delete-btn"><i class="gcl gcllajitong"></i></a>' +
'<a index="' + a + '" class="big-btn" type="button" data-toggle="modal" data-target=".bs-example-modal-lg"><i class="gcl gclfangda"></i></a></div></li>');
}
}
//建立可存取到file的url
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
</script>