ボタンでAsyncFileUploadコントロールを起動する

Question

AsnyncFileUploadコントロールをページ内の別のコントロールから起動したいとします。

私はASP.NET AJAXツールキットからAsyncfileUploadを使用して、JQueryで非表示にしています。ボタンをその隣に置きます。このボタンをクリックしてファイルを選択してもAsycnFileUploadを起動してファイルをアップロードしたいとき。

私はコードのほとんどを書いていますが、ファイルを選択するとJavascriptエラーが表示されます。

---

（ERROR：アクセスが拒否されました。

PLACE：setTimeout(function() { mainForm.submit(); //Error here; uploader._waitTimer = setTimeout(function() { uploader._wait() }, 100); }, 0);

---

<asp:Button ID="btnFileUpload" runat="server" Text="Add" onclientclick="FileUploadClick(); return false;"/> 
<ajaxToolkit:AsyncFileUpload runat="server" ID="AsyncFileUpload1" Width="400px" UploaderStyle="Modern" UploadingBackColor="#CCFFFF"/> 

そして、これが私のJavascriptで（私はコントロールによって生成されるマークアップを見て、ファイルの入力を得た タイプに「_ct102」を追加）

function FileUploadClick() { 
      var fileUploadControl = document.getElementById('<%= AsyncFileUpload1.ClientID %>' + '_ctl02') 
      fileUploadControl.click(); 
      //fileUploadControl.setActive();     
     } 

Answer 1

私はこれをさらに研究し、これができないことを発見しました。 セキュリティ上の理由により、他のコントロールからのファイルタイプの入力を無効にしています。だからこれはできません。

ファイルアップロードコントロールのスタイルを変更するには、不透明度0のコントロールを配置し、コントロールをこのファイルコントロールの下に置き、HTMLのZ-インデックスを変更します。 これは、AsyncFileUploadコントロールの正確なトリックです。ここで

はトリック http://www.quirksmode.org/dom/inputfile.html

をexplaingリンクはだから私は、内部でHTMLファイルアップロードコントロールに

おかげで上記のすべての

Answer 2

シンプルなソリューションを、それを適用しているAsyncFileUploadにこのトリックを適用しています問題はCSSを追加することです。たとえば、これはすべてのブラウザで機能します。

<style type="text/css"> 
    .FileUploadClass input 
    { 
     width:100%!important; // mandatory 
    } 
</style> 

<ajaxToolkit:AsyncFileUpload ID="asyncFileUpload" runat="server" CssClass="FileUploadClass" OnUploadedComplete="asyncFileUpload_UploadedComplete" UploaderStyle="Traditional"/>