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

最新推荐文章于 2024-05-12 20:28:22 发布
最新推荐文章于 2024-05-12 20:28:22 发布
阅读量1.7k 收藏 5
点赞数 1
分类专栏： 个人感想 文章标签： asp.net  C# 图片批量上传 asp.net图片浏览即上传
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liang15zhu/article/details/101758364
版权

一、首先先上效果图：

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 layer(small) {
            $(".layer_con img").on("load", function () {
                var $con = $(".layer_con").height() + 30;
                $(".layer_bg").css({ "display": "block" });
                var $winH = $(window).height();
                if ($con > $winH) {
                    $(".layer_con").css({ "height": $winH, "display": "block", "top": "0", "margin-top": "0" });
                } else {
                    $(".layer_con").css({ "display": "block", "top": "50%", "margin-top": -$con / 2 });
                }
            })
        }

//关闭放大图片
        $(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>

                <div id="upBox2">


                     <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

最低0.47元/天 解锁文章
liang15zhu
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
9行代码实现图片上传和预览(自定义按钮上传)
技术圈
06-19 2267
h5原生实现，嘎嘎好用，快来copy吧。
asp 图片上传源码 【亲测】
08-14 412
<!--#include virtual="/website/blog/include/upload_5xsoft.inc"--> <% dim upload,file,formName,formPath,iCount set upload=new upload_5xsoft ''建立上传对象 set file=upload.file("UserPic") f...
ASP.NET之图像控件
最新发布
2301_77523055的博客
05-12 1244
在ASP.NET中，用于显示图像的控件主要是Image控件，Image控件属于ASP.NET Web Forms的一部分，它允许你在Web页面上显示图像。以下是如何在ASP.NET Web Forms中使用。
html5 asp 上传图片,asp.net 上传并预览图片 示例源码(LayUI )
weixin_42131316的博客
06-04 564
【实例简介】【实例截图】【核心代码】上传Demo上传图片：图片预览： 图片信息：暂无任何图片数据图片名称图片大小图片真实名称图片地址{{d.FileNames}}{{d.imgsize}}{{d.TrueFileNames}}{{d.imgurl}}layui.use(['form', 'upload', 'laytpl'], function () {var...
ASP图片预览区代源代码
06-15
自己用ASP做的一个小型的图片预览网页，希望对你们有些帮助，主要是用来浏览图片的一个小网页
C#中的FileUpload 选择后的预览效果具体实现
01-21
C#中的FileUpload 选择后的预览效果 实现方法： HTML： 代码如下: <asp ID=”fupTmpPic” runat=”server” xss=removed> <asp ID=”imgDimensionalPic” runat=”server”> JS： 代码如下: [removed] function onFileChange(sender) { document.getElementById(“imgDimensionalPic”).src
分享111个ASP上传下载源码，总有一款适合您
zy0412326的专栏
03-19 871
分享111个ASP上传下载源码，总有一款适合您
ASP.NET MVC实现图片上传、图片预览显示
10-22
主要为大家详细介绍了ASP.NET MVC实现图片上传、图片预览显示的相关资料,需要的朋友可以参考下
asp.net fileupload控件上传图片并预览图片
01-21
本文为大家分享了fileupload控件实现上传图片后并进行预览图片的功能，并对web.config进行了配置，先看一下最终效果： 页面代码： <form id=form1 runat=server> <asp ID=FileUpload1 runat=server> ...
asp.net使用fileupload上传图片并预览
01-25
在ASP.NET中，使用FileUpload控件可以实现用户在网页上选择本地图片文件并上传到服务器的功能。此功能涉及到前端HTML、后端C#代码以及Web应用程序的配置。以下是对这个过程的详细解释： 1. **前端代码**：在HTML...
ASP.NET多张图片上传
08-24
通过以上步骤，你可以在ASP.NET中实现多张图片的上传功能。这个过程涉及到前端交互、后端处理、文件保存、数据库操作等多个环节，每个环节都需要细心处理以确保功能的稳定性和安全性。在实际开发中，根据项目需求，...
ASP.NET 图片预览
02-26
能够在asp.net上传后立即预览图片，针对部分浏览器有效
asp.net多图上传
07-26
asp.net多图上传,非常实用的代码。基于Syste.Io
webuploader web 大文件上传源代码
weixin_45525177的博客
12-15 154
_FILES['myFile']['tmp_name'] 文件被上传后在服务端储存的临时文件名，一般是系统默认。php默认的post_max_size 为2M.如果 POST 数据尺寸大于 post_max_size $_POST 和 $_FILES superglobals 便会为空.$_FILES['myFile']['type'] 文件的 MIME 类型，需要浏览器提供该信息的支持，例如"image/gif"。允许上传文件的最大大小，此指令必须小于post_max_size。
asp.net上传图片并能实现实时预览
宜臶瑏芯的博客
01-17 3559
前台aspx：         //下面用于图片上传预览功能         function setImagePreview(avalue) {             document.getElementById("tbFile").value = document.getElementById("file").value;             var docObj = do
asp.net 图片批量上传预览，在Silverlight页面中读取并滚动显示
分享经验，共同进步.
07-27 3084
Silverlight动态读取图片并滚动显示 asp.net页面中图片上传并预览   <%@ Page Language="C#" AutoEventWireup="true" CodeFile="MultiFileUpload.aspx.cs" Inherits="GQGL_MultiFileUpload" %> <!DOCTYPE html PUBLIC "-//W3C
ASP.NET(C#)实现一次性动态上传多张图片的代码（多个文件）
热门推荐
chelen_jak的专栏
09-19 1万+
原文出处：http://www.jb51.net/article/28538.htm 我们就要让这些文件上传框动态添加，下面我以我做的一个图库管理中的上传图片的功能为例 在做asp.net的Web开发的时候，我们经常会遇到一次性上传多个文件的需求。通常我们的解决方法是固定放多个上传文件框，这样的解决办法显然是不合理的，因为一次上传多个，就意味着数量不确定。因此我们就要让这些文件上
用javascript+asp.net批量上传相片的经验总结。
weixin_33921089的博客
05-22 81
需求：　　在一个相册时批量上传相片。相片具有相片标题、相片描述等信息。－－－　　如果单独的批量上传相片，那没有啥可说的。NET的上传功能可说绰绰有余。只要记得　　<form enctype="multipart/form-data" .......就可以了。－－－　第一个：　需要考虑的是每张照片对应它自己的标题和描述。。。考虑了一下，我最后采用，在动态添加上传表单时　　给予相应的文本框加na...
asp.net简单实例——同时上传多个文件
网站开发初中级代码参考-转载
10-06 423
之前在网站上看到的一些上传文件的功能，感觉还是蛮方便的，这次自己利用asp.net中的HttpFileCollection类做了一个简单的例子。废话不多说，下面看操作。 首先，添加一个新的web窗体，在窗体上直接拖拽这几个控件：一个Panel作为容器、一个FileUpload来添加文件、一个TextBox用来设置同时添加文件的个数、以及两个Button，用于实际控制。如下图： ...
asp.net mvc 在服务器端将图片预览裁剪并上传
05-31
你可以使用 jQuery插件jCrop来对图片进行预览和裁剪，然后使用 ASP.NET MVC的文件上传功能将裁剪后的图片上传到服务器。 以下是大致的实现步骤： 1. 在视图中引入 jCrop 插件和 jQuery 库： ``` <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/css/jquery.Jcrop.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/js/jquery.Jcrop.min.js"></script> ``` 2. 在视图中显示待裁剪的图片： ``` <img src="path/to/image" id="crop-image" /> ``` 3. 使用 jCrop 插件初始化图片裁剪： ``` <script> $(function () { $('#crop-image').Jcrop({ aspectRatio: 1, onSelect: updateCoords }); }); function updateCoords(c) { $('#x').val(c.x); $('#y').val(c.y); $('#w').val(c.w); $('#h').val(c.h); }; </script> ``` 4. 添加表单元素用于提交裁剪的坐标： ``` <form method="post" action="Upload" enctype="multipart/form-data"> <input type="hidden" name="x" id="x" /> <input type="hidden" name="y" id="y" /> <input type="hidden" name="w" id="w" /> <input type="hidden" name="h" id="h" /> <input type="file" name="file" /> <input type="submit" value="Upload" /> </form> ``` 5. 在控制器中实现文件上传和图片裁剪： ``` [HttpPost] public ActionResult Upload(HttpPostedFileBase file, int x, int y, int w, int h) { if (file != null && file.ContentLength > 0) { var fileName = Path.GetFileName(file.FileName); var filePath = Path.Combine(Server.MapPath("~/Uploads"), fileName); var img = Image.FromStream(file.InputStream); // 裁剪图片 var croppedImg = new Bitmap(w, h); var g = Graphics.FromImage(croppedImg); g.DrawImage(img, new Rectangle(0, 0, croppedImg.Width, croppedImg.Height), new Rectangle(x, y, w, h), GraphicsUnit.Pixel); croppedImg.Save(filePath); return RedirectToAction("Index"); } return View(); } ``` 这样就可以在 ASP.NET MVC 中实现图片预览、裁剪和上传了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值