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 后，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

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