zoukankan      html  css  js  c++  java
  • 网站功能小Demo——图片文件上传

      网站建设的过程中,经常会遇到文件上传功能,例如Word文档、Excel表格、图片等文件。这一实用的小功能如何实现的呢!我们一起来探究。

      在ASP.NET中,文件上传功能用到了FileUpload组件。下面就用图片的上传功能演示整个上传过程。

      前台设置好FileUpload组件:

    1 <body>
    2     <form id="form1" runat="server">
    3     <div class="div_align">
    4         <asp:FileUpload id="Up_Image" runat="server" CssClass="File_Load" />
    5         <asp:Button ID="btn_save" runat="server" Text="上传" CssClass="Submit_btn" OnClick="btnSave_Click"/>
    6     </div>
    7     </form>
    8 </body>

        

      大致效果如下(项目开发过程中需要美观可以定义一些自己喜欢的样式):

      后台流程处理:后台获取所选文件的文件名,并进行扩展名验证,验证上传文件是否为常用的jpg,jpeg,png等常用图片格式。为了使得上传文件唯一,将当前系统文件作为文件新名称。设置好文件存放路径后调用SaveAs( )方法即可完成上传流程。

     1 /// <summary>
     2         /// 文件上传流程(获取文件名->后缀名验证->获取保存路径->提交保存)
     3         /// </summary>
     4         /// <param name="sender"></param>
     5         /// <param name="e"></param>
     6         protected void btnSave_Click(object sender, EventArgs e)
     7         {
     8             //获取上传文件名
     9             string str = Up_Image.FileName;
    10 
    11             if (string.IsNullOrEmpty(str))
    12             {
    13                 ClientScript.RegisterStartupScript(this.GetType(), "message", "<script>alert('上传失败:尚未选择提交文件!')</script>");
    14 
    15                 return;
    16             }
    17 
    18             //获取文件扩展名
    19             string extension = Path.GetExtension(Up_Image.PostedFile.FileName);
    20 
    21             //ClientScript.RegisterStartupScript(this.GetType(),"message", "<script>alert('"+last+"')</script>");
    22 
    23             if (extension != ".jpg" && extension != ".png" && extension != ".jpeg")
    24             {
    25                 ClientScript.RegisterStartupScript(this.GetType(),"message", "<script>alert('上传文件格式必须为图片(jpg、jpeg、png等)格式!')</script>");
    26 
    27                 return;
    28             }
    29 
    30             //获取当前时间作为文件名
    31             string Time_Now = DateTime.Now.ToString("yyMMddHHMMss");
    32 
    33             string imageName = Time_Now + extension;
    34 
    35             //获取目标文件夹路径作为图片存放路径
    36             string strUpPath = Server.MapPath("~/Image_File/") + imageName;
    37             try
    38             {
    39                 //上传图片
    40                 Up_Image.SaveAs(strUpPath);
    41 
    42                 ClientScript.RegisterStartupScript(this.GetType(), "message", "<script>alert('上传成功!')</script>");
    43             }
    44             catch (Exception ex)
    45             {
    46                 ClientScript.RegisterStartupScript(this.GetType(), "message", "<script>alert('上传失败,请联系管理员!')</script>");
    47             }
    48         }

      
      图片上传功能至此结束。功能本身并没有什么难度,扩展一下可以上传不同类型的文件,也可以尝试多文件上传。希望大家能发散思维,做更多的尝试,对知识进行发掘的过程总是美好的!

  • 相关阅读:
    H5页面获取屏幕宽高
    装修注意事项
    两列等高布局
    html/css
    css的几种垂直水平居中方法
    3分钟看懂flex布局
    Android手机里H5页面滚动图片时出现白屏
    JavaScript正则表达式——函数
    javascript正则表达式——语法
    【react】子组件向父组件传值
  • 原文地址:https://www.cnblogs.com/SunshineAgain/p/6588840.html
Copyright © 2011-2022 走看看