如何更改文件上传控件中的按钮文本？答案

【问题标题】：How to change button text in file upload control?如何更改文件上传控件中的按钮文本？
【发布时间】：2014-01-07 18:19:46
【问题描述】：

我尝试更改文件上传控件浏览按钮的文本。我制作了文件上传控件visible=false，并添加了另一个文本框和按钮：

.aspx 文件：

<asp:FileUpload ID="fuUploadPhoto" runat="server" visible="false"/>
<asp:TextBox ID="tbFilePath" runat="server" />
<asp:Button ID="btnChooseFile" runat="server" Text="Choose file from disk" />

接下来我尝试在 .cs 的 PageLoad 中将属性添加到 btnChooseFile。不幸的是它不起作用，我不知道为什么。我哪里做错了？

.cs 文件：

protected void Page_Load(object sender, EventArgs e)
    {
        btnChooseFile.Attributes.Add("onclick", "document.getElementById(" + fuUploadPhoto.ClientID + ").click()");
       MultiViewAddPhoto.SetActiveView(viewAddPhotoStepOne);
    }

protected void btnChooseFile_Click(object sender, EventArgs e)
    {

        if (fuUploadPhoto.HasFile)
        {
            tbFilePath.Text = fuUploadPhoto.PostedFile.FileName;
            string filename = Path.GetFileName(fuUploadPhoto.FileName);
            string ext = Path.GetExtension(filename);
            imageGuid = Guid.NewGuid();

            string contenttype = String.Empty;
            switch (ext)
            {
                case ".jpg":
                    contenttype = "image/jpg";

                    break;
                case ".jpeg":
                    contenttype = "image/jpg";

                    break;
                case ".png":
                    contenttype = "image/png";

                    break;
            }


            if (string.IsNullOrEmpty(contenttype))
            {
                ltrErrorMessage.Text = "Nieprawidłowy format pliku!";
            }
            //prawidłowy format pliku
            else
            {

                if (fuUploadPhoto.PostedFile.ContentLength > MyConsts.DAL.SizeOfPhoto)
                {
                    ltrErrorMessage.Text = "Plik może mieć maksymalnie "+ MyConsts.DAL.SizeOfPhoto/1024 + " Mb! Zmniejsz plik i spróbuj ponownie.";
                }
                //jeśli prawidłowy format i rozmiar zdjęcia
                else
                {
                    try
                    {
                        filePath = ConfigurationManager.AppSettings["FilesPath"] + "\\" + Request.QueryString["konkurs"] + "\\" + imageGuid + ext;
                        path = "\\" + Request.QueryString["konkurs"] + "\\" + imageGuid + ext;

                        //zapisujemy plik na dysk
                        fuUploadPhoto.SaveAs(filePath);

                        if (File.Exists(filePath))
                        {
                            imgInspirationPhoto.ImageUrl = filePath;
                            imgInspirationPhoto.Visible = true;
                        }
                        else
                        {
                            imgInspirationPhoto.Visible = false;
                        }

                    }
                    catch (Exception ex)
                    {
                        Logger.Error(ex.Message, LogSource, ex); 
                    }

                }
            }
        }

    }

【问题讨论】：

参考此链接 => quirksmode.org/dom/inputfile.html
How to change the Text of the browse button in the FileUpload Control (System.Web.UI.WebControls)的可能重复

标签： c# asp.net button

【解决方案1】：

当您将文件上传设为 false 时，它不会在页面上呈现，即它不隐藏但不存在。因此让它显示 none 而不是 visible false。

试试这个

protected void Page_Load(object sender, EventArgs e)
{
    btnChooseFile.Attributes.Add("onclick", "jQuery('#" + fuUploadPhoto.ClientID + "').click();return false;");
   //MultiViewAddPhoto.SetActiveView(viewAddPhotoStepOne);
}

在 aspx 文件中：

<div style="display:none;">
<asp:FileUpload ID="fuUploadPhoto" runat="server"/>
</div>

记得在aspx页面中添加对jQuery库的引用；

更新：在完整回发This solution might help之前，该文件在后面的代码中不可用

【讨论】：

一个可以像这样触发文件上传的点击事件..但是病房之后发生的事情是另一回事

【解决方案2】：

使用两个js文件http://the-echoplex.net/demos/upload-file/file-upload.js和http://the-echoplex.net/demos/upload-file/jelly/min.js。并添加file-upload.css文件。你的示例 aspx 文件是，

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
 <!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">  
 <script src="script/jelly.js" type="text/javascript"></script>  
   <style type="text/css">  
 /****************** Start page styles ********************************************/  
 body {  
      background: #DFA01B;  
      font-family: arial, sans-serif;  
      font-size: 11px;  
      }  
 #wrap {  
      max-width: 600px;  
      margin: 30px auto;  
      background: #fff;  
      border: 4px solid #FFD16F;  
      -moz-border-radius: 15px;  
      -webkit-border-radius: 15px;  
      border-radius: 15px;  
      padding: 20px;  
   }  
 .field {   
      padding: 0 0 1em;   
      }  
 </style>  
 <head runat="server">  
   <title></title>  
 </head>  
 <body>  
   <form id="form1" runat="server">  
   <div id="wrap">  
 <form enctype="multipart/form-data" action="#" method="post">  
      <div class="field">  
           <label class="file-upload">  
                <span><strong>Put YOUR TEXT</strong></span>  
                <%--<input type="file" name="uploadfile" onclintclick="test_load()" />--%>  
       <asp:FileUpload  
         ID="FileUpload1" name="uploadfile" runat="server"   
       ondatabinding="FileUpload1_DataBinding" />  
           </label>  
      </div>  
 </form>  
 </div><!--/ wrap -->  
   <script src="script/file-upload.js" type="text/javascript"></script>  
   </form>  
 </body>  
 </html>

和 CSS 文件，

body {
}
/* 

    As this stylesheet is lazy loaded these styles only apply if JavaScript is enabled

*/  
.file-upload {
    overflow: hidden;
    display: inline-block;
    position: relative; 
    vertical-align: middle;
    text-align: center;

    /* Cosmetics */
    color: #fff;
    border: 2px solid #2FA2FF;
    background: #6FBEFF;

    /* Nice if your browser can do it */
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    text-shadow: #000 1px 1px 4px;
    }

.file-upload:hover { 
    background: #2FA2FF; 
    }

.file-upload.focus { 
    outline: 2px solid yellow;
    }

.file-upload input {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    font-size: 70px;

    /* Loses tab index in webkit if width is set to 0 */
    opacity: 0;
    filter: alpha(opacity=0);
    }

.file-upload strong { 
    font: normal 1.75em arial,sans-serif; 
    }   

.file-upload span {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;

    /* Adjust button text vertical alignment */
    padding-top: .45em;
    }

/* Adjust the button size */    
.file-upload { height: 3em; }
.file-upload,
.file-upload span { width: 14em; }  

.file-upload-status {
    margin-left: 10px;
    vertical-align: middle;
    padding: 7px 11px;
    font-weight: bold;  
    font-size: 16px;
    color: #888;
    background: #f8f8f8;
    border: 3px solid #ddd;
    }

您可以在changedfileuploadbutton text下载示例项目

【讨论】：

【解决方案3】：

你不能使用标准的asp文件上传控件。

您可以创建自己的自定义控件，该控件继承自 FileUpload，您可以在其中添加自定义行为：

public class MyFileUpload : FileUpload 
{
     //do stuff
}

【讨论】：

你是对的，但他并没有试图完全这样做。他只是隐藏文件上传控件并在其位置显示一个普通的按钮和文本框，然后触发其点击事件。
@tariq 我可以看到他正在尝试做什么，这是一个 hacky 解决方案。我的建议是更清洁和可重复使用。
是的。就大局而言，您是对的，我的解决方案仅限于她没有触发它的具体问题。