1

そこで、カスタム ファイル アップロード コントロールを作成して、ファイル アップロード コントロールにカスタムの外観を追加できるようにしました。

  1. コントロールを取得し、asp:fileupload表示をなしに設定しました。
  2. asp:label選択したファイル名を表示するために撮影しました
  3. Javaスクリプトを介してファイルダイアログを開くhtmlボタン
  4. サーバー側でファイルをアップロードする asp ボタン。以下はJavaScriptコードです。html ボタン (上記の #3) をクリックしてファイル ダイアログを開いた後、ファイルを選択します。その後、ASPボタン(上記の#4)をクリックすると、初めてクリックされません。これは Internet Explorer でのみ発生し、他のブラウザでは問題なく動作します。

 function executeFileUploadControl() {
     alert("welcome")
     document.getElementById("fuImage").click();

     return false;
 }

 $(document).ready(function () {

     $('#fuImage').change(function () {
         var filename = $(this).val();
         var lbl = document.getElementById('<%=lblfileName.ClientID%>');

         lbl.innerHTML = filename;

     });
 }); 

コントロール

<input ID="fuImage" type="file" runat="server" clientidmode="Static" name="htmlFileUpload"/>
<div style="border:1px solid #000; width:200px; float:left; margin-right:5px;">
    <input type="button" value="Browse" onclick="javascript:executeFileUploadControl();" />
    <asp:Label runat="server" ClientIDMode="Static" id="lblfileName" Text="No file selected"></asp:Label>
</div>
<asp:Button ID="btnUpload" runat="server" Text="Upload"  OnClick="btnUpload_Click" />
4

0 に答える 0