0

FileUpload ボタンのテキストを変更する方法がないため、FileUpload コントロールを非表示にし、独自の偽のボタンとテキスト ボックスを使用してそれを実行できるようにしました。

<script language="JavaScript" type="text/javascript">
  function HandleFileButtonClick(sender) {
   var parentDiv = $(sender).parent();
   $(parentDiv).children('[id*=fuBoutiqueImage]').click();
  }
  function LoadFakeField(sender) {
   $(sender).parent().find("input[id$='txtFakeText']").val($(sender).val());
  }
</script>

<asp:Panel ID="pnlCommandButtons" runat="server" CssClass="commandButtons">
 <div class="uploader">
  <asp:Label ID="lblUploadFile" EnableViewState="false" runat="server" Text="<%$Resources:Common, BoutiqueGallery_UploadFile %>" />
  <asp:FileUpload ID="fuBoutiqueImage" runat="server" style="" onchange="LoadFakeField(this);" />

  <input ID="txtFakeText" type="text" name="txtFakeText" readonly="true" runat="server" />
  <input ID="btnFakeButton" type="button" onclick="HandleFileButtonClick(this);" value="<% $Resources:Common, ButtonName_Browse %>" runat="server" />
 </div>

 <asp:Panel ID="pnlDeleteButton" class="delete" runat="server">
  <ef:ButtonExt ID="btnDelete" runat="server" Text="<%$Resources:Common, BoutiqueGallery_Delete %>" OnClick="btnDelete_Click" CausesValidation="false" Color="Red" Icon="Delete" Width="60" />
 </asp:Panel>
 <div id="pnlAddButton" class="add">
   <ef:ButtonExt ID="btnAdd" runat="server" Text="<%$Resources:Common, UploadImage %>" OnClick="btnAdd_Click" ValidationGroup="emailSend" Width="104" />
   <asp:CustomValidator ID="CustomValidator1" runat="server" ControlToValidate="fuBoutiqueImage" ErrorMessage="<%$Resources:Common, Attachment_FileToLarge %>" Text="<%$Resources:Common, Attachment_FileToLargeTextBox %>"  Display="Dynamic" OnServerValidate="CustomValidator1_ServerValidate" ValidationGroup="emailSend"></asp:CustomValidator>
<asp:RegularExpressionValidator ID="FileUpLoadValidator" runat="server" ErrorMessage="<%$Resources:Common, Attachment_FileFormat %>" Text="<%$Resources:Common, Attachment_FileFormatTextbox %>" ValidationExpression=".*(\.jpg|\.png|\.gif|\.tif|\.jpeg|\.JPG|\.JPEG|\.PNG|\.GIF|\.TIF)$" ControlToValidate="fuBoutiqueImage" Display="Dynamic" ValidationGroup="emailSend" />
 </div>
 <div class="isActiveCheckbox">
 <asp:CheckBox ID="cbImageIsActive" class="chkItem" OnCheckedChanged="cbImageIsActive_CheckedChanged" Checked='<%# Eval("IsActive") %>' AutoPostBack="true" runat="server" Text="<%$Resources:Common, BoutiqueGallery_IsImageActive %>" />
 </div>
</asp:Panel>

私の btnFakeButton は FileUpload クリック アクションをトリガーし、その後パス/ファイル名が偽のテキスト ボックスにコピーされます。次に、btnAdd をクリックすると、ff ではすべて正常に動作しますが、IE では動作しません。

IE では、ファイルを選択してダイアログ ボックスを閉じた後、パス/ファイル名がコピーされますが、btnAdd を押す (またはチェックボックスをクリックする) と、FileUpload テキスト ボックスがクリアされ、何も起こりません。btnAdd を 2 回押した後、btnAdd_Click が開始されますが、FileUpload は空で、エラーで終了します。txtFakeText から FileUpload テキストボックスを復元できないため、FileUpload のクリアを防ぐ方法はありますか?

4

1 に答える 1

0

これは私が行った方法ですが、IE 用に設計するだけでよいため、他のブラウザーでこれをテストしていません。また、テキスト ボックスの代わりにラベルを使用して、選択したファイル名を表示しました。

正しい道を歩み始めたこのサイトの功績を認めなければなりません: http://www.codeproject.com/Tips/296593/To-trigger-Choose-file-to-Upload-dialogue-box-with

基本的に、私がしたことは、あなたがしたように 2 つのボタンを作成することでした。CSS を使用して、ファイル アップロード コントロール ボタンを「偽の」ボタンと同じサイズにしました。次に、「偽の」ボタンの z-index を -1 に設定し、ファイル アップロード コントロール ボタンのすぐ後ろに配置しました。次に、ファイル アップロード コントロール ボタンの不透明度を 0 に設定します。この方法では、「偽の」ボタンは使用されず、送信をクリックしたときに実際のファイル アップロード ボックスがクリアされるという問題は発生しません。リンクされた記事には詳しく説明されていませんが、最後のステップは、ファイル アップロード ボタンの「onchange」を、ファイル名ラベルの値を更新する機能に変更することです。

コードは次のとおりです。

function updateUploadLabel() {
        document.getElementById("<%= FileUpload1.ClientID %>").click();
        document.getElementById("<%= lblFileName.ClientID %>").innerHTML = document.getElementById("<%= FileUpload1.ClientID %>").value;
        document.getElementById("txtInstructions").disabled = "true";
        document.getElementById("removeUpload").style.display = 'inline';
    }
<asp:FileUpload id="FileUpload1" onchange="updateUploadLabel()" runat="server" style="position: relative; opacity: 0; filter: alpha(opacity = 0);left:0px;font-size:24px; z-index:50; width:100px;/*display:none;*/"/>
<input type="button" id="btnChooseDoc" value="Choose File..." onclick="updateUploadLabel()" style="height:30px; width:100px; z-index: -1; position:relative; left: -105px; top: -10px;" />
<asp:Label id="lblFileName" runat="server" text='No File Chosen' style="position:relative; left: -105px; top: -10px;"></asp:Label>
于 2012-05-21T21:59:39.517 に答える