asp.net 上传图片（包括预览图,js）

最新推荐文章于 2023-03-30 11:50:22 发布
最新推荐文章于 2023-03-30 11:50:22 发布
阅读量2.9k 收藏 1
点赞数
分类专栏： ASP.NET JS 文章标签： asp.net 上传图片 预览图 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengshi_sh/article/details/11570061
版权
ASP.NET 同时被 2 个专栏收录
21 篇文章 0 订阅
订阅专栏
JS
15 篇文章 0 订阅
订阅专栏
  //   js实现预览功能
< script  type ="text/javascript">
     function  readURL(input) {
         if  (input.files && input.files[0]) {
             var  reader =  new  FileReader();
            reader.onload =  function (e) { $( '#img_prev'  ).attr( 'src' , e.target.result).width(544).height(168); };
            reader.readAsDataURL(input.files[0]);
        }  else  {
             //IE 下，使用滤镜
             var  docObj = document.getElementById( 'inputFile' ); docObj.select();
             var  imgSrc = document.selection.createRange().text;
             var  localImagId = document.getElementById( "localImag" );
            $(  '#localImag' ).width(544).height(168);  // 必须设置初始大小
             // 图片异常的捕捉，防止用户修改后缀来伪造图片
             try  {
                localImagId.style.filter =  "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"  ;
                localImagId.filters.item(  "DXImageTransform.Microsoft.AlphaImageLoader"  ).src = imgSrc;
            }  catch  (e) {
                alert(  " 您上传的图片格式不正确，请重新选择  !" );  return  false ;
            }
            $(  '#img_prev' ).hide();
            document.selection.empty();
        }
    }   
</ script >


< body >
     < form  id ="form1"  runat ="server">
     < div ><  span >< strong  > 请首先指定 Banner 图片  : </ strong  ></ span >
         < asp :  DropDownList  ID  ="DropDownList1"  runat ="server"
             onselectedindexchanged ="DropDownList1_SelectedIndexChanged"  AutoPostBack  ="true">
             < asp :  ListItem  Selected  ="True"  Value  ="0"> 新闻一 </  asp : ListItem  >
             < asp :  ListItem  Value  ="1"> 新闻二 </  asp : ListItem  >
             < asp :  ListItem  Value  ="2"> 新闻三 </  asp : ListItem  >
             < asp :  ListItem  Value  ="3"> 新闻四 </  asp : ListItem  >
             < asp :  ListItem  Value  ="4"> 广告一 </  asp : ListItem  >
             < asp :  ListItem  Value  ="5"> 广告二 </  asp : ListItem  >
             < asp :  ListItem  Value  ="6"> 广告三 </  asp : ListItem  >
             < asp :  ListItem  Value  ="7"> 广告四 </  asp : ListItem  >     
         </ asp :  DropDownList >< br  />< br  />
         < table  width ="65%"  border ="0"  id ="tab"  cellpadding ="0"  cellspacing ="1"  bgcolor ="#a8c7ce">
             < tr >
                 < td  width ="20%"  height ="30"  bgcolor ="#e1e5ee"  style =" text-align  : left">
                     < div  align ="center">
                         < span  class ="STYLE10"> 请选择图片：  < br  /> ( 图片大小  680*210) </ span  >
                     </ div >
                 </ td >
                 < td  width ="80%"  height ="20"  bgcolor ="#e1e5ee"  style =" text-align  : left">
                     < input  id ="inputFile"  style =" width  :  584px"  type ="file"    onchange ="readURL(this);"  runat  ="server"/>
<%  --                    <input type='file' id="doc" οnchange="readURL(this);" /> --  %>
                 </ td >
             </ tr >
             < tr >
                 < td  width ="20%"  height ="20"  bgcolor ="#e1e5ee"  style =" text-align  : left">
                      < div  align ="center">
                       < span  class ="STYLE10"> 预览图：  </ span ></  div >
                 </ td >
                 < td  width ="80%"  bgcolor ="#e1e5ee"  style =" text-align  : left"  height ="20px">
                     < div  id ="localImag">< img  id ="img_prev"  name =""  src =""  alt ="your image"    Height ="168px"  Width ="544px"  /></ div >
                    < div  style =" display  : none">  < asp :  TextBox  ID  ="imgText"  Text  =""  Visible  ="true"  runat ="server"></ asp :  TextBox ></ div  >
    <% --                <asp:Image ID="Image1" runat="server"  Height="168px" Width="544px" />-- %>
                 </ td >
             </ tr >
             < script  type ="text/javascript">
                $(document).ready(  function () {
                    $(  '#img_prev' ).attr( "src"  , $( '#imgText' ).val());
                    $(  "#DropDownList1"  ).change( function () {
                        $(  '#img_prev' ).attr( "src"  , $( '#imgText' ).val());
                    });
                     if  ($( "#DropDownList1"  ).val() > 3) {
                        $(  "#introTr" ).css( "display"  ,  "" );
                    }
                     else  {
                        $(  "#introTr" ).css( "display"  ,  "none" );
                    }
                });
             </ script >
            < tr  id ="introTr"  style =" display  : ">
                < td  width ="20%"  height ="20"  bgcolor ="#e1e5ee"  style =" text-align  : left">
                      < div  align ="center">
                                 < span  class ="STYLE10"> 请输入文字：  </ span ></  div >
                 </ td >
                 < td  width ="80%"  height ="20"  bgcolor ="#e1e5ee"  style =" text-align  : left">
                     < asp :  TextBox  ID  ="TextBox1"  runat  ="server"  Height  ="140px"  TextMode ="MultiLine"
                         Width ="443px"></ asp :  TextBox >
                 </ td >
             </ tr >

             < tr  >
                 < td  height ="50"  bgcolor ="#e1e5ee"  style =" text-align  : center">


                 </ td >
                 < td  height ="50"  bgcolor ="#e1e5ee"  style =" text-align  : center">
                   < asp :  Button  ID  ="btnSave"  runat  ="server"  Text  =" 上传 "  onclick ="btnSave_Click"  />
                   &nbsp;&nbsp;&nbsp;
                   < asp :  Button  ID  ="btnDelete"  runat  ="server"  Text  =" 删除 "  onclick ="btnDelete_Click"  />
                 </ td >
             </ tr >
         </ table >
     </ div >
     </ form >
</ body >


后台：

using  System;
using  System.Collections;
using  System.Configuration;
using  System.Data;
using  System.Linq;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.HtmlControls;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Xml.Linq;
using  BizComponents;
using  Entity;
using  System.Collections.Generic;
using  System.Text.RegularExpressions;
using  System.Text;
namespace  Admin.Banner
{
     public  partial  class  BannerSet  : System.Web.UI. Page
    {
         public  int  total;
         public  int  sentTotal;
         Banner_Biz  biz =  new  Banner_Biz ();

         protected  void  Page_Load( object  sender,  EventArgs  e)
        {
             if  (!IsPostBack)
            {
                 Banner  info = getInfo();
                TextBox1.Text = info.Introduction;
                imgText.Text =  "/images/"  + info.Picture;
            }

        }

         protected  void  btnSave_Click( object  sender,  EventArgs  e)
        {
             try
            {
                 string  imgName = inputFile.Value;
                 if  (! string  .IsNullOrEmpty(imgName) || ! string .IsNullOrEmpty(imgText.Text.Replace( "/images/" ,  "" )))
                {
                     string  name = imgName; //  获取文件名   
                     string  type = name.Substring(name.LastIndexOf( "." ) + 1);       // 获取文件类型
                     string  fileName =  DateTime  .Now.ToString( "yyyyMMddHHmmss" );
                     string  ipath = Server.MapPath( "../../images"  ) +  "\\"  + fileName +  "."  + type;       //  获取文件路径   
                     if  (type ==  "jpg"  || type ==  "gif"  || type ==  "bmp"  || type ==  "png"  || type ==  "jpeg"  || type ==  "" )
                    {
                         if  (inputFile.PostedFile.ContentLength <= 1024000)
                        {
                             Banner  info =  new  Banner ();
                            info.Picture = fileName +  "."  + type;
                            info.Introduction = TextBox1.Text;
                             if  ( Convert  .ToInt32(DropDownList1.SelectedValue) >= 4)
                            {
                                info.IsNews =  false ;
                                info.Sort =  Convert .ToInt32(DropDownList1.SelectedValue) - 3;
                            }
                             else
                            {
                                info.IsNews =  true ;
                                info.Sort =  Convert .ToInt32(DropDownList1.SelectedValue) + 1;
                            }

                             string  transfer =  "BannerSet.aspx?_"  +  DateTime .UtcNow.Ticks;
                             try
                            {
                                 int  result = 0;
                                 Banner  info1 = getInfo();
                                 if  ( string  .IsNullOrEmpty(imgName))
                                {
                                    info.Picture = info1.Picture;
                                }
                                 if  (info1 !=  null  && info1.ID != 0)
                                {
                                    info.ID = info1.ID;
                                    info.Status = 1;
                                    info.AddTime = info1.AddTime;
                                    result = biz.Banner_Update(info);
                                }
                                 else
                                {
                                    result = biz.Banner_ADD(info);
                                }
                                 if  (result > 0)
                                {
                                     if  (! string  .IsNullOrEmpty(imgName))
                                    {
                                        inputFile.PostedFile.SaveAs(ipath);
                                    }
                                    Response.Write(  "<script>alert('  图片上传成功！  ');location.href='"  + transfer +  "'</script>"  );
                                }
                                 else
                                {
                                    Response.Write(  "<script>alert('  图片上传失败！  ')'</script>" );
                                }
                            }
                             catch  ( Exception  ex)
                            {
                                 Logger .Error( "  图片上传出错  " , ex);
                                Response.Write(  "<script>alert('"  + ex.Message +  "')</script>" );
                            }
                        }
                         else
                        {
                            ClientScript.RegisterStartupScript(  this .GetType(),  ""  ,  "alert(' 图片不能超时  1M')" ,  true  );
                        }
                    }
                     else
                    {
                        ClientScript.RegisterStartupScript(  this .GetType(),  ""  ,  "alert(' 图片格式不正确  ')" ,  true  );
                    }
                }
                 else
                {
                    ClientScript.RegisterStartupScript(  this .GetType(),  ""  ,  "alert(' 请选择上传图片  ')" ,  true  );
                }

            }
             catch  ( Exception  ex)
            {
                 Logger .Error( "  上传图片失败  " , ex);
            }
        }

         protected  void  btnDelete_Click( object  sender,  EventArgs  e)
        {
             string  transfer =  "BannerSet.aspx?_"  +  DateTime .UtcNow.Ticks;
             Banner  info =  new  Banner ();
             if  ( Convert  .ToInt32(DropDownList1.SelectedValue) >= 4)
            {
                info.IsNews =  false ;
                info.Sort =  Convert .ToInt32(DropDownList1.SelectedValue) - 3;
            }
             else
            {
                info.IsNews =  true ;
                info.Sort =  Convert .ToInt32(DropDownList1.SelectedValue) + 1;
            }
            info = biz.Banner_GetAll(info.Sort, info.IsNews);
             if  (info !=  null  && info.ID != 0)
            {
                 try
                {
                     int  result = biz.Banner_DelByID(info.ID); // 调用删除方法
                     if  (result > 0)
                    {
                        Response.Write(  "<script>alert('  删除图片成功！  ');location.href='"  + transfer +  "'</script>"  );
                    }
                     else
                    {
                        Response.Write(  "<script>alert('  删除图片失败！  ')'</script>" );
                    }
                }
                 catch  ( Exception  ex)
                {
                     Logger .Error( "  删除图片出错  " , ex);
                    Response.Write(  "<script>alert('"  + ex.Message +  "')</script>" );
                }
            }
        }

         protected  void  DropDownList1_SelectedIndexChanged(  object  sender,  EventArgs  e)
        {
             Banner  info = getInfo();
            TextBox1.Text = info.Introduction;
            imgText.Text =  "/images/"  + info.Picture;
        }

         public  Banner  getInfo()
        {
             Banner  info =  new  Banner ();
             if  ( Convert  .ToInt32(DropDownList1.SelectedValue) >= 4)
            {
                info.IsNews =  false ;
                info.Sort =  Convert .ToInt32(DropDownList1.SelectedValue) - 3;
                TextBox1.Visible =  true ;
            }
             else
            {
                info.IsNews =  true ;
                info.Sort =  Convert .ToInt32(DropDownList1.SelectedValue) + 1;
                TextBox1.Visible =  false ;
            }
            info = biz.Banner_GetAll(info.Sort, info.IsNews);
             return  info;
        }
    }
}
不知道未来的你多强大
关注
专栏目录
asp.net图片上传
10-17
asp.net图片上传，上传至数据库，项目文件夹, VS2008+mssql
Asp.net图片上传实现预览效果的简单代码
01-02
在页面上放入一个上传控件和一个图片控件. 代码如下: <asp ID=”FileUpload1″ runat=”server” xss=removed> <asp ID=”Image1″ runat=”server” > 在上传控件中写onpropertychange=”show(this.value)”...
ASP.NET2.0打通文件图片处理任督二脉【月儿原创】
热门推荐
无界编程
04-01 4万+
ASP.NET2.0打通文件图片处理任督二脉作者：清清月儿 主页：http://blog.csdn.net/21aspnet/           时间：2007.4.11.最简单的单文件上传(没花头)2.多文件上传3.客户端检查上传文件类型(以上传图片为例)4.服务器端检查上传文件类型(以上传图片为例) 5.服务器端检查上传文件类型(可以检测真正文件名) 6.上传文件文件名唯一性处理
Asp.net上传图片产生预览效果
lem's Blog
03-07 1万+
1在页面上放入一个上传控件和一个图片控件. asp:FileUpload ID="FileUpload1" runat="server" onpropertychange="show(this.value)"/>        asp:Image ID="Image1" runat="server"  />2在上传控件中写onpropertychange="show(this.
使用ASP.NET上传图片汇总
weixin_30807677的博客
12-22 91
1 使用标准HTML来进行图片上传 前台代码： <body> <form id="form1" runat="server"> <div> <table> <tr> <td colspan="2" style="height: 21...
ASP.NET上传图片时并产生预览
hljncxjh的专栏
07-29 417
      图片链接                         缩略图                 后台代码:string fullFileName=this.fileUpLoad.PostedFile.FileName;        string fileName=fullFileName.Substring(fullFileName.LastInde
ASP.NET MVC实现图片上传、图片预览显示
10-22
- 当用户选择文件后，可以在前端实现一个预览功能，根据选择的文件生成图片的缩略图展示给用户，这需要使用JavaScript或jQuery等技术。 - 表单提交至服务器后，后端控制器需要接收上传的文件。文件被存储到服务器的...
ASP.NET MVC图片上传前预览简单实现
01-02
本文实例为大家分享了图片上传前预览并获取图片文件名和图片字节大小的具体... 您可能感兴趣的文章:.Net Core实现图片文件上传下载功能ASP.NET MVC实现图片上传、图片预览显示asp.net图片文件的上传与删除方法asp.ne
asp.net 头像上传及预览剪裁实例源码
01-25
资源名：asp.net 头像上传及预览剪裁实例源码 资源类型：程序源代码 源码说明： 1.上传并预览，用户可以任意选择区域，支持头像旋转 2.支持上传成功，js 回调函数 3.无论图片过大还是过小，都可以按照固定大小显示 4...
JS+asp.net+图片上传+预览+支持多上传+上传前预览
09-29
JS+asp.net+图片上传+预览+支持多上传+上传前预览
js+asp.net 多图片上传+预览
07-23
js+asp.net 多图片上传+预览
asp.net实现图片上传
12-01
asp.net实现图片上传，支持多图上传，可预览，操作方便。
asp.net实现图片上传及时预览
08-04
asp.net实现图片上传及时预览，需要朋友可以下载，代码很简单，只有两三行就解决了--
asp.net实现图片上传预览
04-06
asp.net因为回传机制的原因图片上传预览就不那么好做，这里给一个滤镜的方式用来实现图片上传预览的功能，希望对大家有所帮助
asp.net 文件上传
06-11
本文讲的是Asp.Net中FileUpload实现文件上传示例， 属性:FileName: 获取上传的文件名 HasFile: 是否选择(存在)上传的文件 ContentLength: 获得上窜文件的大小,单位是字节(byte) 方法:Server.MapPath(): 获取服务器上
Asp.net图片文件上传
gx_up
12-11 374
对课本上的代码进行了一点的优化 1.获取文件的名称和文件的后缀名 　　引用了System.IO， 　　用Path.GetFileNamehe()取得文件名和Path.GetExtension获取文件的后缀 2.对上传的文件进行了重命名 　　采用Guid全局唯一标识进行命名 　　Guid.NewGuid().ToString() 3.根据日期创建文件夹，先判断文件夹是否存在，不存在就创建一个
ASP.net上传图片
weixin_44719554的博客
04-09 279
ASP.net上传图片 Web Forms ·NET Framework中的上传图片 代码示例* protected void Button1_Click(object sender, EventArgs e) { if (FileUpload1.HasFile) { //获取上传...
ASP.NET实现图片上传
小白记录
04-18 2442
网页需要实现上传图片，上传显示图片和路径 Html代码端 <div class="row"> <div class="col-lg-10" id="img"> <div id="imgPreview"> ...
ASP.NET控件上传图片
最新发布
weixin_54663667的博客
03-30 836
一个比较简短的ASP.NET上传文件的代码
ASP.NET 图片上传与预览示例：兼容多种格式
本篇文章将深入讲解如何在ASP.NET环境中实现图片上传及预览的功能。首先，我们将介绍HTML和服务器端脚本（如JavaScript）的基础配合，以及如何在客户端进行图片格式检查和兼容性处理。 1. HTML结构： 在HTML部分，...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值