jQuery的文件上傳清爽頁面

我看到了這個問題，"Show Open Dialog on a Button click"：jQuery的文件上傳清爽頁面

「我必須顯示在點擊一個按鈕一個打開的對話框。基本上我有上傳文件，爲此我使用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" />

但我試過了，它所做的只是刷新頁面，任何人都知道問題是什麼？

來源

2011-11-09 Roy Gavrielov

當然，您可以想出更具描述性的標題。 –

你能發佈生成的HTML嗎？ – Blender

@Matt - 你對一個叫「班級」的人有什麼期望？只是在開玩笑;-) –

因爲「FileUpload1」不是ClientID。只要看看你的頁面生成的HTML源代碼，你會看到。

你應該使用類似：

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

來源

2011-11-09 16:44:11

@多米尼克它不工作 –

我剛剛嘗試了他的代碼，它完美的作品。執行此操作..打開頁面。單擊發送文件按鈕。按Ctrl + Shift + J，查看列出了哪些錯誤。 –

我想它畢竟是在工作！ –

所有的服務器端控件（那些runat="server"屬性）有自己的ID通過ASP.NET重新寫入。您的ID實際上看起來像ctl00_MainContent_btn。

您可以通過使用<%= btn.ClientID %>服務器標籤或通過爲您的控件分配CSS類並在JavaScript/jQuery中引用該類來解決此問題。

編輯：你可能還需要確保你的ASP按鈕不是一個提交按鈕，這將導致生成的頁面提交表單。

來源

2011-11-09 16:44:48 jwiscarson

它不起作用 –

@RoyGavrielov，**什麼**不工作？我們需要更多的信息來幫助你解決你的問題。 – jwiscarson

對不起，我換了（「#btn」）和（「<％= btn。（「＃<％= FileUpload1.ClientID％>」）並且仍然不起作用 –

這聽起來像是一個安全風險，如果安全阻止了它的工作，我不會感到驚訝。

看看這個jQuery Ajax Upload插件。

來源

2011-11-09 16:45:13

@ James我可以' t在我的組織中使用 –

你不能使用什麼？一個jQuery腳本？ –

安裝一個插件 –

我會建議你不要去那條路線。如果你想避免向用戶顯示FileUpload控制.. use this。

來源

2011-11-09 16:47:08

@ mohib我不能在我的組織中使用它 –

使客戶端模式的靜態能夠訪問你喜歡這個

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

來源

2011-11-09 16:47:30

你的頁面刷新，因爲表單的目標是隱含在當前頁面控件。您需要將表單的目標設置爲（例如）隱藏的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>

來源

2011-11-09 18:57:03 benekastah

jQuery的文件上傳清爽頁面

回答

相關問題