zoukankan      html  css  js  c++  java
  • C# 自定义FileUpload控件

    摘要:ASP.NET自带的FileUpload控件会随着浏览器的不同,显示的样式也会发生改变,很不美观,为了提高用户体验度,所以我们会去自定义FileUpload控件

    实现思路:用两个Button和TextBox控件来替代FileUpload控件,当点击Button时触发FileUpload控件的点击事件,然后通过JS把FileUpload控件的Value赋给TextBox

    代码:

    aspx文件:

     1 <html xmlns="http://www.w3.org/1999/xhtml">
     2 <head id="Head1" runat="server">
     3     <title></title>
     4 </head>
     5 <body>
     6     <form id="form1" runat="server">
     7     <div>
     8         <asp:FileUpload ID="FileUp" runat="server" Style="display:none; 180px" />
     9         <asp:TextBox ID="txtFileName" runat="server" MaxLength="100" Width="170px"></asp:TextBox>
    10         <asp:Button id="btnBrowse" runat="server" style="60px" CssClass="btn" OnClientClick="return ShowBrowse()"
    11             Text="Browse" />
    12         <asp:Button ID="btnUpload" runat="server" Width="60px" CssClass="btn" OnClick="btnUpload_Click" 
    13             Text="Upload" />
    14     </div>
    15     </form>
    16     <script language="javascript" type="text/javascript">
    17         function ShowBrowse()  
    18         {  
    19             var file1=document.getElementById("FileUp");  
    20             if(file1)  
    21             { 
    22                 file1.click();  
    23                 var isie = (document.all) ? true : false; //判断是IE内核还是Mozilla 
    24                 return isie; //火狐浏览器加return false才会在选择文件后将文件名带回到textbox,IE如果返回false上传时要点击两次按钮才触发
    25             }  
    26         }   
    27     </script>
    28 </body>
    29 </html>
    View Code

    JS文件:

    1 function Check_FilePath() {
    2     var FilePath = document.getElementById("FileUp");
    3     var FileNewName = document.getElementById("txtFileName");
    4     if (FilePath.value != '') 
    5     { 
    6         FileNewName.value = FilePath.value;
    7     }
    8 }

    aspx.cs文件:

    1 //Page_Load事件
    2 this.FileUp.Attributes.Add("onchange", "javascript:return Check_FilePath();");
     1 //btnUpload_Click事件
     2 //当点击btnUpload_Click时,把文件上传到指定路径
     3 //需要考虑多浏览器的问题,如果是IE,直接用FileUpload控件的SaveAs功能,会保存一个空文件
     4 string strFileName="本地保存文件的路径";
     5 if (HttpContext.Current.Request.Browser.Browser == "IE")
     6 {
     7     WebClient wClient = new WebClient();
     8     wClient.DownloadFile(this.txtFileName.Text.Trim(), strFileName);
     9 }
    10 else
    11 {
    12     this.FileUp.PostedFile.SaveAs(strFileName);
    13 }

    遗留问题:当IE浏览器安全级别高时,会取不到文件的完整路径,类似于C:fakepathTP.jpg,而导致保存不了;

    网上的很多解决办法是手动更改IE浏览器的安全级别,我在想是否可以在代码中实现更改IE浏览器的安全级别,研究ing......

    希望有解决方案的朋友们可以分享一下:)

  • 相关阅读:
    前端编译原理 简述-jison
    GraphQL入门
    前端理解控制反转ioc
    window.onload和JQuery中$(function(){})的区别即其实现原理
    移动web之一像素问题
    display:table和display:table-cell的妙用
    sticky footer布局
    Elements in iteration expect to have 'v-bind:key' directives错误的解决办法
    vue模拟后台数据,请求本地数据的配置(旧版本dev-server.js,新版本webpack.dev.conf.js)
    使用vue-cli脚手架搭建项目,保存编译时出现的代码检查错误(ESLint)
  • 原文地址:https://www.cnblogs.com/AnneHan/p/5532338.html
Copyright © 2011-2022 走看看