获取POST 请求发送的文件 并保存到服务器
HttpPostedFile file = System.Web.HttpContext.Current.Request.Files["file"];
//获取上载文件名称
string _FileName = file.FileName;
//后缀
string _Ext = _FileName.Substring(_FileName.LastIndexOf("."));
//新文件名
string _NewName = "class-" + DateTime.Now.ToString("yyyyMMddHHmmssfff");
//获取上传路径
string _ImgPath = System.Configuration.ConfigurationManager.AppSettings["Field_img"].ToString();
//存储文件的路径及文件
string _Path = Server.MapPath(_ImgPath) + _NewName + _Ext;
//存文件到服务器磁盘
file.SaveAs(_Path);
批量上传图片 后端＋js前端
这里的前端样式可以去我的资源那里下载
后端代码
try
{
//获取url中的参数
var PId = Request.QueryString["PId"];
//截取字节流数据
HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
if (files.Count > 0)
{
for (var i = 0; i < files.Count; i++)
{
//获取字节流数据
var file = Request.Files["myFile[" + i + "]"];
//重命名文件
var fileName = file.FileName;
//获取文件后缀名
var fileExt = Path.GetExtension(fileName);
//获取年月日时分秒
var date = DateTime.Now.ToString("yyyyMMddHHmmss");
//生成三位数的随机数
var random = new Random();
var randomNum = random.Next(100, 999);
//生成新的文件名= 当前Id+年月日时分秒+随机数+后缀名
var newFileName = PId + "-" + date + randomNum + fileExt;
//将文件保存到服务器上
//先判断路径是否存在
var day = DateTime.Now.ToString("yyyyMMdd");
var path = Server.MapPath("~/Upload/" + day);
if (!Directory.Exists(path))
{
//没有文件路径则创建
Directory.CreateDirectory(path);
}
var filePath = Server.MapPath("~/Upload/" + day + "/");
//保存到服务器
file.SaveAs(filePath + newFileName);
//将文件信息保存到数据库
/*这里写保存图片路径到数据库的业务*/
}
return Json(new { data = 200 });
}
else
{
return Success(-1, "请选择需要上传的图片");
}
}
catch (Exception ex)
{
return Success(-1, ex.Message);
}
前端(js语法)
html
<div class="form-group">
<label class="control-label col-md-2">上传图片：</label>
<div class="col-md-8">
<div class="main">
<div class="upload-content">
@*<h3>上传图片</h3>*@
<div class="content-img">
<ul class="content-img-list"></ul>
<div class="file">
<i class="gcl gcladd"></i>
<input type="file" name="file" accept="image/*" id="upload" multiple>
</div>
</div>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="button" class="btn btn-info" id="btn-submit-upload"><span class="glyphicon glyphicon-ok"></span>保存</button>
</div>
</div>
js
<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) {
// console.log(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>
1302
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
