Question

由于无法更改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点击操作，然后将路径/ fileName复制到假文本框。然后我可以点击btnAdd，一切都在ff中工作正常，但在IE中却没有。

在选择文件和关闭对话框后的IE中，路径/ fileName被复制，但是当我按下btnAdd（或单击复选框）时，FileUpload文本框被清除，没有任何反应。在第二次按btnAdd后，btnAdd_Click启动但FileUpload为空，并以错误结束。由于我无法从txtFakeText恢复FileUpload文本框，有没有办法阻止FileUpload清除？

Answer 1

我就是这样做的，虽然我只需要为IE设计，所以我没有在其他浏览器中测试过。此外，我使用标签而不是文本框来显示所选的文件名。

我必须赞扬这个网站让我在正确的道路上开始：http://www.codeproject.com/Tips/296593/To-trigger-Choose-file-to-Upload-dialogue-box-with

基本上，我所做的就是创建两个按钮，就像你所做的那样。我使用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>

在IE中提交后，不需要的FileUpload文本框清除

1 个答案: