Question

我看到了这个问题，"Show Open Dialog on a Button click"：

'我必须在按钮点击时显示一个打开对话框。基本上我必须上传一个文件，为此我使用FileUpload控件，但我不想向用户显示它，而是我要显示一个Button'

答案是：

 <script type="text/javascript">      
   $(document).ready(function() {      
      $("#btn").click(function() {       
        $("#FileUpload1").click();         
       return false; 
      });         
   });  
   </script>   
   <style type="text/css">      
      .Class { visibility:hidden;}     
   </style> </head> <body>    
   <form id="form1" runat="server">  
   <div>       
      <asp:Button ID="btn"  runat="server" Text="Send File"/>   
      <asp:FileUpload ID="FileUpload1" CssClass="Class" runat="server" />

但是我尝试了它并且所做的只是刷新页面，任何人都知道问题是什么？

Answer 1

因为“FileUpload1”不是ClientID。只需查看生成的页面HTML源代码，您就会看到它。

你应该使用类似的东西：

<script type="text/javascript">      
$(document).ready(function() {      
  $("#<%= btn.ClientID %>").click(function() {       
    $("#<%= FileUpload1.ClientID %>").click();         
      return false; 
  });         
});  
</script>

Answer 2

所有服务器端控件（具有runat="server"属性的控件）都会由ASP.NET重写其ID。您的ID实际上看起来像ctl00_MainContent_btn。

您可以使用<%= btn.ClientID %>服务器标记或通过为控件分配CSS类并在JavaScript / jQuery中引用该类来解决此问题。

编辑：您可能还需要确保您的ASP按钮不是提交按钮，这会导致生成的页面提交表单。

Answer 3

这听起来像是一种安全风险，如果安全性阻止了这项工作，我也不会感到惊讶。

看看这个jQuery Ajax Upload插件。

Answer 4

我建议你不要走那条路。如果您想避免向用户显示FileUpload控件.. use this。

Answer 5

使客户端模式静态，以便能够像这样访问您的控件

<asp:FileUpload ID="FileUpload1" ClientIDMode="Static" CssClass="Class" runat="server" /> 
  <asp:Button ID="btn"  ClientIDMode="Static"  runat="server" Text="Send File"/>

Answer 6

您的页面会刷新，因为表单的目标是隐含的当前页面。您需要将表单的目标设置为（例如）隐藏的iframe：

<form id="my-form" action="url" target="form-target" method="post">
  <!-- your form here -->
</form>

<iframe id="form-target" name="form-target" style="display:none;"></iframe>

<script>
  // Assuming you are using jquery
  var form = $('#my-form'),
      iframe = $('#form-target');

  // create a function to be called each time the iframe loads
  iframe.load(function () {
    var responseText, iframeBody;

    // Get the response from the server. It will be in the body tag of your iframe
    iframeBody = $(this).contents().find('body');
    responseText = iframeBody.text().trim();
    // Don't continue until we actually have a response
    if (!responseText) return;
    // Clear the iframe's html so this function won't be called again for the same content
    iframeBody.html('');

    // do whatever you want with the response, for example JSON decode it
    response = JSON.parse(responseText);
  });
</script>

jQuery文件上传刷新页面

6 个答案: