jQuery文件上传刷新页面答案

【问题标题】：jQuery file upload refreshing pagejQuery文件上传刷新页面
【发布时间】：2011-11-10 02:57:03
【问题描述】：

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

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

答案是：

 <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" />

但我试过了，它所做的只是刷新页面，有人知道问题是什么吗？

【问题讨论】：

当然你可以想出一个更具描述性的标题。
你能发布生成的 HTML 吗？
@Matt - 你对一个将他的课程命名为“Class”的人有什么期望？开个玩笑;-)
@Dominic 如果您仔细阅读，您会发现这不是我的代码；)
@Roy - 是的，我知道，我说我在开玩笑！！ ;-)

标签： javascript asp.net file-upload

【解决方案1】：

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

你应该使用类似的东西：

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

【讨论】：

我刚试了他的代码，效果很好。执行此操作.. 打开页面.. 单击发送文件按钮.. 按 Ctrl+Shift+J 并查看列出了哪些错误。
是的，但现在我的 HTML 访问被拒绝:(

【解决方案2】：

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

看看这个jQuery Ajax Upload插件。

【讨论】：

@James 我无法在我的组织中使用它
你不能用什么？一个 jQuery 脚本？
您不能使用任何第三方库？它只是一个 javascript 文件，并不是你安装的真正的插件......

【解决方案3】：

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

【讨论】：

@mohib 我不能在我的组织中使用它

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

所有服务器端控件（具有runat="server" 属性的控件）的 ID 都由 ASP.NET 重写。您的 ID 实际上类似于 ctl00_MainContent_btn。

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

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

【讨论】：

@RoyGavrielov，什么不起作用？我们需要您提供更多信息来帮助您解决问题。
抱歉，我将 ("#btn") 替换为 ("") 和 ("#FileUpload1") 替换为 ("# ") 仍然无法正常工作
您可以编辑问题以包含新信息吗？您是否收到任何错误消息？您是否尝试过使用 FireBug 或调试任何 C# 代码来缩小导致刷新的范围？另外，您是否检查过以确保您的 ASP 按钮没有将表单提交到您所在的页面？

【解决方案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>

【讨论】：