ASP.NET 多张图片上传，并可以预览。

liang15zhu

于 2019-09-30 11:04:55 发布

阅读量1.8k

点赞数 1

分类专栏：个人感想文章标签： asp.net C# 图片批量上传 asp.net图片浏览即上传

本文链接：https://blog.csdn.net/liang15zhu/article/details/101758364

版权

本文介绍了如何在ASP.NET中实现多张图片上传并实时预览的效果，主要利用FileUpload控件和DataList展示上传图片。通过前端样式布局和后端代码处理，用户在上传图片前后的界面显示得以实现。

摘要由CSDN通过智能技术生成

一、首先先上效果图：

1、上传前

2、上传后

二、主要使用控件：FileUpload，DataList展示多张图片

三、代码

1、前台aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ProductZiZhiUpload.aspx.cs" Inherits="ProductZiZhiUpload" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
       <meta charset="UTF-8">

       <style type="text/css">
           *{
               margin: 0;
               padding: 0;
           }
           #upBox{
               text-align: center;
               /*width:500px;*/
               padding: 2px;
               border: 1px solid #666;
               margin: auto;
               margin-top: 15px;
               margin-bottom: 20px;
               position: relative;
               border-radius: 10px;
           }
   #upBox2{
               text-align: center;
               /*width:500px;*/
               padding: 2px;
               border: 1px solid #666;
               margin: auto;
               margin-top: 15px;
               margin-bottom: 20px;
               position: relative;
               border-radius: 10px;
           }
   #upBox3{
               text-align: center;
               /*width:500px;*/
               padding: 2px;
               border: 1px solid #666;
               margin: auto;
               margin-top: 15px;
               margin-bottom: 20px;
               position: relative;
               border-radius: 10px;
           }
#upBox4{
               text-align: center;
               /*width:500px;*/
               padding: 2px;
               border: 1px solid #666;
               margin: auto;
               margin-top: 15px;
               margin-bottom: 20px;
               position: relative;
               border-radius: 10px;
           }
           #inputBox{
               width: 100%;
               height: 40px;
               border: 1px solid cornflowerblue;
               color:red;
               border-radius: 20px;
               position: relative;
               text-align: center;
               line-height: 40px;
               overflow: hidden;
               font-size: 16px;
background-color:deepskyblue;
           }
#inputBox2{
               width: 100%;
               height: 40px;
               border: 1px solid cornflowerblue;
               color:red;
               border-radius: 20px;
               position: relative;
               text-align: center;
               line-height: 40px;
               overflow: hidden;
               font-size: 16px;
background-color:deepskyblue;
           }
#inputBox3{
               width: 100%;
               height: 40px;
               border: 1px solid cornflowerblue;
               color:red;
               border-radius: 20px;
               position: relative;
               text-align: center;
               line-height: 40px;
               overflow: hidden;
               font-size: 16px;
background-color:deepskyblue;
           }
#inputBox4{
               width: 100%;
               height: 40px;
               border: 1px solid cornflowerblue;
               color:red;
               border-radius: 20px;
               position: relative;
               text-align: center;
               line-height: 40px;
               overflow: hidden;
               font-size: 16px;
background-color:deepskyblue;
           }
           #inputBox input{
               width: 114%;
               height: 40px;
               opacity: 0;
               cursor: pointer;
               position: absolute;
               top: 0;
               left: -14%;

           }
   #inputBox2 input{
               width: 114%;
               height: 40px;
               opacity: 0;
               cursor: pointer;
               position: absolute;
               top: 0;
               left: -14%;

           }
   #inputBox3 input{
               width: 114%;
               height: 40px;
               opacity: 0;
               cursor: pointer;
               position: absolute;
               top: 0;
               left: -14%;

           }
#inputBox4 input{
               width: 114%;
               height: 40px;
               opacity: 0;
               cursor: pointer;
               position: absolute;
               top: 0;
               left: -14%;

           }
           #imgBox{
               text-align: left;
           }
#imgBox2{
               text-align: left;
           }
#imgBox3{
               text-align: left;
           }
#imgBox4{
               text-align: left;
           }

       .yincang{

display:none;

       }
       #Button1{
               display: inline-block;
               text-align: center;
               line-height: 30px;
               outline: none;
               width: 100px;
               height: 30px;
               background: cornflowerblue;
               border: 1px solid cornflowerblue;
               color: white;
               cursor: pointer;
               margin-top: 30px;
               border-radius: 5px;
           }

       .card-layerBg {
display: none;
width: 100%;
z-index: 999;
position: fixed;
background-color: #000;
opacity: 0.5;
top: 0;
height: 100%;
filter: alpha(opacity=50);
}

.card-layerCon {
display: none;
width: 600px;
padding: 10px 30px 20px 0;
background-color: #fff;
z-index: 9999;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
opacity: 1;
filter: alpha(opacity=100);
text-align:center;
}

.close {
font-size: 33px;
text-align: center;
color: #ab2223;
position: absolute;
right: 10px;
top: -8px;
cursor: pointer;
}

.card-layerM {
width: 100%;
margin: 0 auto;
padding: 10px;
padding-top: 25px;
overflow-y: auto;
max-height:100%;
text-align: center;

}
.card-layerM img{
width:auto;
max-width:100%;
max-height:100%;
}


       </style>

<script src="js/jquery1.10.2.min.js"></script>
<script src="My97DatePicker/WdatePicker.js"></script>
   <script type="text/javascript">

//有效期字段是否为空检验方法
function btnsave_onclick() {

   var ctime = $("*[id$=tendtime]").val();
   $("*[id$=Label2]").text("*");
   if (ctime == "") {

alert("有效期为空！");
return false;

} else {

return true;

}

//点击上传图片查询大图的js

//关闭放大图片
$(function () {

   $(".close").on("click", function () {
   $(".layer_con").css("display", "none");
   $(".layer_bg").css("display", "none");
   });

});

   </script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div style=" margin-top:20px;">
<table align="center" border="1" bordercolor="#b7dcef" cellpadding="1" cellspacing="1"
width="99%">

<tr>
<td align="right" width="25%" height="30px" class="auto-style1">
药品生产批件有效期：</td>
<td align="left" width="30%" class="auto-style1">

<asp:TextBox ID="tendtime" runat="server" onClick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd'})" Width="123px"></asp:TextBox>
<asp:Label ID="Label2" runat="server" Text="*" ForeColor="#CC0000"></asp:Label>
</td>

<td>

点击图片查看大图
</td>


</tr>




</table>
</div>
       <div style="width: 100%;">
           <div id="upBox">
<asp:HiddenField ID="HiddenField1" runat="server" />
               <asp:HiddenField ID="HiddenField2" runat="server" />
               <div id="inputBox">

//点击FileUpload1上传浏览按钮，通过javascript:__doPostBack('lbUploadPhoto','')，直接执行lbUploadPhoto按钮的方法
<asp:FileUpload ID="FileUpload1" runat="server" οnchange="javascript:__doPostBack('lbUploadPhoto','')" />
<asp:LinkButton ID="lbUploadPhoto" runat="server" OnClick="lbUploadPhoto_Click" CssClass="yincang"></asp:LinkButton>
点击选择药品生产批件

</div>
<div id="imgBox">

<asp:DataList ID="CFlist" runat="server" BackColor="White"
BorderColor="#E7E7FF" CellPadding="3"
GridLines="Horizontal" Width="99%" onitemcommand="DataList1_ItemCommand" RepeatDirection="Horizontal" RepeatColumns="5">
<AlternatingItemStyle BackColor="#F7F7F7" />
<FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
<ItemStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" BorderColor="black" />

<ItemTemplate >
<table style="border-color:Black">
<tr>
<td style="border-style:none">
<img alt="<%#Eval("imagename") %>" src='<%#Eval("imageurl") %>' style="height:270px ;cursor:hand" οnclick=" $('.layer_con img').prop('src', this.src);layer($(this));"/>

//onclick方法里是点击图片看大图的js
</td>
</tr>
<tr>
<td style="height:40px;width:100px;border-style:none" >
<center> <asp:LinkButton ID="lbDe" CommandArgument=<%#Eval("id") %> CommandName="De" runat="server">删除</asp:LinkButton></center></td>
</tr>

</table>

</ItemTemplate>
<SelectedItemStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
</asp:DataList>

           </div>

   <div id="inputBox2">
<asp:FileUpload ID="FileUpload2" runat="server" οnchange="javascript:__doPostBack('lbUploadPhoto2','')" />
<asp:LinkButton ID="lbUploadPhoto2" runat="server" CssClass="yincang" OnClick="lbUploadPhoto2_Click"></asp:LinkButton>

点击选择药品包装及说明书</div>
           <div id="imgBox2">

<asp:DataList ID="DataList2" runat="server" BackColor="White"
BorderColor="#E7E7FF" CellPadding="3"
GridLines="Horizontal" Width="99%" onitemcommand="DataList2_ItemCommand" RepeatDirection="Horizontal" RepeatColumns="5">
<AlternatingItemStyle BackColor="#F7F7F7" />
<FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
<ItemStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" BorderColor="black" />

<ItemTemplate >
<table style="border-color:Black">
<tr>
<td style="border-style:none">
<img alt="<%#Eval("imagename") %>" src='<%#Eval("imageurl") %>' style="height:270px ;cursor:hand" οnclick=" $('.layer_con img').prop('src', this.src);layer($(this));"/>
</td>
</tr>
<tr>
<td style="height:40px;width:100px;border-style:none" >
<center> <asp:LinkButton ID="lbDe" CommandArgument=<%#Eval("id") %> CommandName="De" runat