多图片上传WebForm

Posted 2021-11-28 kirins

<%@ Page Title="" Language="C#" MasterPageFile="~/Normal.Master" AutoEventWireup="true" CodeBehind="ProjectDisplayAdd.aspx.cs" Inherits="TsaWeb.Admin.CMS.ProjectDisplayAdd" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
<%--<link href="../Upload/css/tinyImgUpload.css" rel="stylesheet" />--%>
<style>
.BQlist1 table {
width: 100%;
}

.BQlist1 td {
width: 25%;
padding: 0 4px;
margin-right: 0px;
background-color: transparent;
font-size: 12px;
height: 26px;
line-height: 26px;
display: block;
float: left;
}

.BQlist1 td input {
vertical-align: middle;
margin-right: 2px;
}

.BQlist1 td label {
vertical-align: middle;
}

.auto-style4 {
width: 76px;
height: 42px;
}
</style>
<%-- <link href="../CMS/webuploader/Styles/webuploader.css" rel="stylesheet" />
<link href="../CMS/webuploader/Styles/style.css" rel="stylesheet" />--%>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Custom" runat="server">
<script src="../_res/js/jquery-3.3.1.js"></script>
<script>
var i = 0;
function addFile() {
if (i < 100) {
var str = "";
str += ‘<p id="tr_‘ + i + ‘">‘;
str += ‘<a href="javascript:;" class="a-upload">‘;
str += ‘ <input type="file" id="File_‘ + i + ‘" name="‘+i+‘" onchange="loadPic(this.name)">‘;
str += ‘</a>‘;
str += ‘<img src="" id="img_‘ + i + ‘" style="width:50px;height:50px" />‘;
str += ‘ <input id="Button1" type="button" name="‘ + i +‘" onclick="delFiles(‘+i+‘)" style="color:red" value="X" /></p>‘;

document.getElementById(‘MyFile‘).insertAdjacenthtml("beforeEnd", str)
}
else {
alert("您一次最多只能上传100个图片！")
}
i++
}


</script>
<div class="page-container">
<div class="page-content case">
<h2 class="title">项目展示</h2>
<div class="table">
<form action="" id="form2">
<div class="table-form">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%">
<table width="95%" cellspacing="0" cellpadding="0" border="0" class="tb_table1">
<tr>
<td class="name" style="width: 165px">关联的期数：</td>
<td>
<asp:DropDownList ID="ACID" runat="server" OnSelectedIndexChanged="soluTiTleName_SelectedIndexChanged"
AutoPostBack="True">
</asp:DropDownList>
<!-- <p>多于15个字省略号显示</p> -->
</td>
<td><span class="star">*</span></td>
</tr>
<tr>
<td class="name" style="width: 165px">项目展示的标题：
</td>
<td>
<asp:TextBox runat="server" ID="ProjectTitle" class="input"></asp:TextBox>
<!-- <p>多于15个字省略号显示</p> -->
</td>
<td>
<span class="star">*</span>
</td>
</tr>

<tr>
<td class="name" style="width: 165px">
<input onclick="addFile()" type="button" style="background-color: #007fcb; color: #fff" value="增加图片" class="auto-style4">

</td>
</tr>
<tr>
<td class="name" style="width: 165px" colspan="2">
<div id="MyFile">
<%--<p id="tr_0">
<input type="file" id="File_0" size="50" name="0" onchange="loadPic(this.name)">
<img src="" id="img_0" style="width: 50px; height: 50px" />
<input id="Button1" type="button" name="0" onclick="delFiles(this.name)" style="color:red" value="X" />
</p>--%>
</div>
</td>
</tr>

</table>
</td>
</tr>
</table>
</div>
<div class="table-form-btn">
<asp:Button runat="server" ID="btnFB" OnClientClick="return publishck();"
Text="发布" OnClick="btnFB_Click" />

<asp:Button runat="server" ID="btnSave" Text="取消" OnClick="btnSave_Click" />
</div>
<p id="t1" runat="server">
</p>
<asp:HiddenField ID="HiddenField1" ClientIDMode="Static" runat="server" />
</form>
</div>
</div>
</div>

<script>
document.documentElement.style.fontSize = document.documentElement.clientWidth * 0.1 + ‘px‘;

var options = {
path: ‘/‘,
onSuccess: function (res) {
console.log(res);
},
onFailure: function (res) {
console.log(res);
}
}
</script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="AsynElements" runat="server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="Script" runat="server">
<script type="text/javascript">
var ids = [];
function loadPic(id) {
var formData = new FormData();
var name = $("input").val();
formData.append("file", $("#File_" + id)[0].files[0]);
formData.append("name", name);
$.ajax({
url: "../ashx/UploadImg.ashx",
type: ‘POST‘,
data: formData,
// 告诉jQuery不要去处理发送的数据
processData: false,
// 告诉jQuery不要去设置Content-Type请求头
contentType: false,
success: function (responseStr) {
if (responseStr.length === 0) {
alert("上传失败");
} else {
$("#img_" + id).attr("src", responseStr);
for (var i = 0; i < ids.length; i++) {
if (ids[i] == id) {

}
else {
ids.push(id);
}
}

}
},
error: function (responseStr) {
console.log("error");
}
});
}


//添加时的判断
function publishck() {
var ProjectTitle = $("#<%= ProjectTitle.ClientID %>").val();
var Srcs = new Array();
for (var i = 0; i < ids.length; i++) {
Srcs.push(document.getElementById("img_" + ids[i]).src);
}
$("#HiddenField1").val(Srcs.toString());
if (!myValidator(ProjectTitle)) {
alert("请输入项目展示的标题");
return;
}
else {

return true;
}

return false;
}

//删除的判断
function delFiles(num) {
var index = ids.indexOf(num);
$("#tr_" + num).remove();
if (index>-1) {
ids.splice(index, 1);
}
}

var hrefs = location.href.toString();
var id = hrefs.substring(hrefs.indexOf(‘=‘) + 1, hrefs.length);
if (id > 0) {
Edit();
//编辑图片
function Edit() {

addFile();
function addFile() {
var Imgs = $("#HiddenField1").val();
var ArrImg = Imgs.split(",");
for (var i = ids.length; i < ArrImg.length; i++) {
var str = "";
str += ‘<p id="tr_‘ + i + ‘">‘;
str += ‘<a href="javascript:;" class="a-upload">‘;
str += ‘ <input type="file" id="File_‘ + i + ‘" name="‘ + i + ‘" onchange="loadPic(this.name)">‘;
str += ‘</a>‘;
str += ‘<img src="‘ + ArrImg[i] + ‘" id="img_‘ + i + ‘" style="width:50px;height:50px" />‘;
str += ‘ <input id="Button1" type="button" name="‘ + i + ‘" onclick="delFiles(‘+i+‘)" style="color:red" value="X" /></p>‘;
ids.push(i);
document.getElementById(‘MyFile‘).insertAdjacentHTML("beforeEnd", str)
}
}
}
}

</script>
</asp:Content>