asp.net上传图片,保存文件名和路径,并利用javascript显示图片预览

本文介绍了在ASP.NET中如何使用FileUpload控件上传图片,包括获取文件名、判断是否存在文件、保存文件路径,以及如何设置上传文件大小限制。同时,文章提到了通过JavaScript实现图片预览的效果,客户端检查文件类型的重要性,以及服务器端验证的必要性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

FileUpload控件

 

属性:
FileName:
获取上传的文件名


HasFile: 是否选择(存在)上传的文件


ContentLength: 获得上窜文件的大小,单位是字节(byte)

 

方法:
Server.MapPath():
获取服务器上的物理路径

SaveAs(): 保存文件到指定的文件夹

 

注意:默认情况下限制上传文件大小为4MB,通过web.config.comments(这个设置是全局的配置)可以修改其默认设置
或者通过修改web.config文件来改变应用程序上传限制.

<httpRuntime maxRequestLength="10240" executionTimeout="150" enable="true"/>

元素解释:
maxRequestLength:
设置上传文件大小,单位是kb.

 

executionTimeout: 允许执行请求的最大秒数,此功能必须在Compilation元素中Debug属性为false时才生效.

 

enable: 指定是否在当前的节点及子节点级别启用应用程序域 (AppDomain),以接受传入的请求。如果为 False,则实际上关闭了该应用程序。默认值为 True.
通俗的说就是:是否允许用户访问该网站(是否允许Http请求)

 

注意:如果上传文件超过maxRequestLength大小,会出现页面无法显示的情况.

检查文件上传类型:
1).客户端检查(javascript实现)(在控件中使用onclientclick  <asp:Button ID="Button1" runat="server" οnclick="Button1_Click"  OnClientClick="checkType()" Text="上傳" />)


2).服务器端检查

<script type="text/javascript" language="javascript">
         function checkType() {

             //得到上传文件的值   
             var fileName = document.getElementById("FileUpLoad1").value;

             //返回String对象中子字符串最后出现的位置.   
             var seat = fileName.lastIndexOf(".");

             //返回位于String对象中指定位置的子字符串并转换为小写.   
             var extension = fileName.substring(seat).toLowerCase();

             //判断允许上传的文件格式   
             //if(extension!=".jpg"&&extension!=".jpeg"&&extension!=".gif"&&extension!=".png"&&extension!=".bmp"){   
             //alert("不支持"+extension+"文件的上传!");   
             //return false;   
             //}else{   
             //return true;   
             //}   

             var allowed = [".jpg", ".gif", ".png", ".bmp", ".jpeg"];
             for (var i = 0; i < allowed.length; i++) {
                 if (!(allowed[i] != extension)) {
                     return true;
                 }
             }
             alert("不支持" + extension + "格式");
             return false;
         }  
     </script>
控件代码:
<asp:FileUpload ID="FileUpload1" runat="server" onpropertychange="show1(this.value)" />
    <asp:Button ID="Button1" runat="server" οnclick="Button1_Click"  OnClientClick="checkType()" Text="上傳" />
上传按钮事件:
 protected void Button1_Click(object sender, EventArgs e)
    {
        string constr = ConfigurationManager.ConnectionStrings["SqlConnection"].ConnectionString;
        con = new SqlConnection(constr);
        
        if (this.FileUpload1.HasFile)
        {
//              
//           string strName = FileUpload1.PostedFile.FileName; //使用FileUpload控件获取上传文件的文件名,FileUpload1为控件的ID
//           if (strName != "") //如果文件名存在
//          {         
//                int i = strName.LastIndexOf(".");//获取“.“的索引顺序号
//                string ext = strName.Substring(i);//获取文件扩展名
//                string newName = Guid.NewGuid().ToString();//生成新的文件名,保证唯一性
//                string relativePath = "admin\\images";//设置文件相对网站根目录的保存路径
//                string absolutePath = Server.MapPath("~\\admin\\images");  //得到文件保存绝对路径 
                  //if (!Directory.Exists(absolutePath))//如果images不存在,就创建
                  //{
                  //     Directory.CreateDirectory(absolutePath);//创建文件images
                  //}
                  //    string newFileName = absolutePath + "\\" + newName + ext;//得到带新文件名的完整物理路径
                  //   fileUpload.PostedFile.SaveAs(newFileName);//图片存储到服务器
                  //   txtImageUrl.Text = relativePath + "\\" + newName + ext;//包含相对路径的图片名
    
//           }
            //判断文件是否小于10Mb
            if (this.FileUpload1.PostedFile.ContentLength < 10485760)
            {
                try
                {
                    //上传文件并指定上传目录的路径   
                    this.FileUpload1.PostedFile.SaveAs(Server.MapPath("~/Img/")
                        + this.FileUpload1.FileName);
                    /*注意->这里为什么不是:FileUpLoad1.PostedFile.FileName  
                    * 而是:FileUpLoad1.FileName?  
                    * 前者是获得客户端完整限定(客户端完整路径)名称  
                    * 后者FileUpLoad1.FileName只获得文件名.  
                    */

                    //当然上传语句也可以这样写(貌似废话):   
                    //FileUpLoad1.SaveAs(@"D:\"+FileUpLoad1.FileName);   
                    
                     this.Label1.Text = "上传成功!";
                     string sql = string.Format("insert into Img(ImgUrl,ImgSize,ImgName) values('{0}','{1}','{2}')", Server.MapPath("~/Img/") + this.FileUpload1.FileName, this.FileUpload1.PostedFile.ContentLength, this.FileUpload1.FileName);
                     SqlCommand cmd = con.CreateCommand();
                     cmd.CommandText = sql;
                     con.Open();
                     SqlTransaction tran = con.BeginTransaction();
                     cmd.Transaction = tran;
                     int i=0;
                     try
                     {
                        i= cmd.ExecuteNonQuery();
                         tran.Commit();
                     }
                     catch(Exception ex)
                     {
                         tran.Rollback();
                     }
                     finally
                     {
                         con.Close();
                     }
                     if (i == 1)
                     {
                         this.Response.Write("<Script Language='JavaScript'>window.alert('上傳團片" + i.ToString() + "張')</script>");
                     }
                }
                catch (Exception ex)
                {
                    this.Label1.Text = "出现异常,无法上传!";
                    //lblMessage.Text += ex.Message;   
                }

            }
            else
            {
                this.Label1.Text = "上传文件不能大于10MB!";
            }
        }
        else
        {
            this.Label1.Text = "尚未选择文件!";
        }  
    }


图片产生预览效果 

<asp:FileUpload ID="FileUpload1" runat="server" onpropertychange="show(this.value)"/>
        <asp:Image ID="Image1" runat="server"  />

在上传控件中写onpropertychange="show(this.value)"事件并调用js中的show函数并将自身的参数传进js.(显示原图片,选择图片后就会产生,不用点上传按钮)
<script type="text/javascript">
         function show(id)
        {
             document.getElementById("Image1").src=id;
        }
    </script>
下面代码用于显示缩略图的地方:
</div>
   <div id="divview" WIDTH: 166px; HEIGHT: 190px">
   </div>
下面显示缩略图的js代码
  <script type="text/javascript">

        function show1(upimg)
        {
             var dd=document.getElementById("divview");
            dd.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = upimg;
            dd.style.width = 166;
            dd.style.height = 190;
            dd.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = 'scale';
        }
       </script>



完整的aspx文件
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="文件上传.aspx.cs" Inherits="文件上传" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <asp:FileUpload ID="FileUpload1" runat="server" onpropertychange="show1(this.value)" />
    <asp:Button ID="Button1" runat="server" οnclick="Button1_Click"  OnClientClick="checkType()" Text="上傳" />
     <script type="text/javascript">
         function show(id)
        {
             document.getElementById("Image1").src=id;
        }
    </script>
    <script type="text/javascript">

        function show1(upimg)
        {
             var dd=document.getElementById("divview");
            dd.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = upimg;
            dd.style.width = 166;
            dd.style.height = 190;
            dd.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = 'scale';
        }
       </script>
     <script type="text/javascript" language="javascript">
         function checkType() {

             //得到上传文件的值   
             var fileName = document.getElementById("FileUpLoad1").value;

             //返回String对象中子字符串最后出现的位置.   
             var seat = fileName.lastIndexOf(".");

             //返回位于String对象中指定位置的子字符串并转换为小写.   
             var extension = fileName.substring(seat).toLowerCase();

             //判断允许上传的文件格式   
             //if(extension!=".jpg"&&extension!=".jpeg"&&extension!=".gif"&&extension!=".png"&&extension!=".bmp"){   
             //alert("不支持"+extension+"文件的上传!");   
             //return false;   
             //}else{   
             //return true;   
             //}   

             var allowed = [".jpg", ".gif", ".png", ".bmp", ".jpeg"];
             for (var i = 0; i < allowed.length; i++) {
                 if (!(allowed[i] != extension)) {
                     return true;
                 }
             }
             alert("不支持" + extension + "格式");
             return false;
         }  
     </script>
    </div>
   <div>
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
   </div>
   <div>
   <asp:Image ID="Image1" runat="server" />
   </div>
   <div id="divview" WIDTH: 166px; HEIGHT: 190px">
   </div>
    </form>
</body>
</html>
完整的ASPX.CS文件
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
public partial class 文件上传 : System.Web.UI.Page
{
    SqlConnection con;
    protected void Page_Load(object sender, EventArgs e)
    {
       
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        string constr = ConfigurationManager.ConnectionStrings["SqlConnection"].ConnectionString;
        con = new SqlConnection(constr);
        
        if (this.FileUpload1.HasFile)
        {
//              
//           string strName = FileUpload1.PostedFile.FileName; //使用FileUpload控件获取上传文件的文件名,FileUpload1为控件的ID
//           if (strName != "") //如果文件名存在
//          {         
//                int i = strName.LastIndexOf(".");//获取“.“的索引顺序号
//                string ext = strName.Substring(i);//获取文件扩展名
//                string newName = Guid.NewGuid().ToString();//生成新的文件名,保证唯一性
//                string relativePath = "admin\\images";//设置文件相对网站根目录的保存路径
//                string absolutePath = Server.MapPath("~\\admin\\images");  //得到文件保存绝对路径 
                  //if (!Directory.Exists(absolutePath))//如果images不存在,就创建
                  //{
                  //     Directory.CreateDirectory(absolutePath);//创建文件images
                  //}
                  //    string newFileName = absolutePath + "\\" + newName + ext;//得到带新文件名的完整物理路径
                  //   fileUpload.PostedFile.SaveAs(newFileName);//图片存储到服务器
                  //   txtImageUrl.Text = relativePath + "\\" + newName + ext;//包含相对路径的图片名
    
//           }
            //判断文件是否小于10Mb
            if (this.FileUpload1.PostedFile.ContentLength < 10485760)
            {
                try
                {
                    //上传文件并指定上传目录的路径   
                    this.FileUpload1.PostedFile.SaveAs(Server.MapPath("~/Img/")
                        + this.FileUpload1.FileName);
                    /*注意->这里为什么不是:FileUpLoad1.PostedFile.FileName  
                    * 而是:FileUpLoad1.FileName?  
                    * 前者是获得客户端完整限定(客户端完整路径)名称  
                    * 后者FileUpLoad1.FileName只获得文件名.  
                    */

                    //当然上传语句也可以这样写(貌似废话):   
                    //FileUpLoad1.SaveAs(@"D:\"+FileUpLoad1.FileName);   
                    
                     this.Label1.Text = "上传成功!";
                     string sql = string.Format("insert into Img(ImgUrl,ImgSize,ImgName) values('{0}','{1}','{2}')", Server.MapPath("~/Img/") + this.FileUpload1.FileName, this.FileUpload1.PostedFile.ContentLength, this.FileUpload1.FileName);
                     SqlCommand cmd = con.CreateCommand();
                     cmd.CommandText = sql;
                     con.Open();
                     SqlTransaction tran = con.BeginTransaction();
                     cmd.Transaction = tran;
                     int i=0;
                     try
                     {
                        i= cmd.ExecuteNonQuery();
                         tran.Commit();
                     }
                     catch(Exception ex)
                     {
                         tran.Rollback();
                     }
                     finally
                     {
                         con.Close();
                     }
                     if (i == 1)
                     {
                         this.Response.Write("<Script Language='JavaScript'>window.alert('上傳團片" + i.ToString() + "張')</script>");
                     }
                }
                catch (Exception ex)
                {
                    this.Label1.Text = "出现异常,无法上传!";
                    //lblMessage.Text += ex.Message;   
                }

            }
            else
            {
                this.Label1.Text = "上传文件不能大于10MB!";
            }
        }
        else
        {
            this.Label1.Text = "尚未选择文件!";
        }  
    }
}



评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值