不需要的文件在IE中提交后清除文本框
Unwanted FileUpload textbox clearing after submit in IE
由于无法更改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触发文件上传点击操作,然后路径/文件名被复制到假文本框。然后我可以单击 btnAdd,一切在 ff 中运行正常,但在 IE 中则不行。
在IE中选择一个文件并关闭对话框后,路径/文件名将被复制,但是当我按btnAdd(或单击复选框)时,FileUpload文本框被清除并且没有任何反应。第二次按下 btnAdd 后,btnAdd_Click开始,但文件上传为空,并以错误结束。由于我无法从txtFakeText恢复文件上传文本框,有什么方法可以防止文件上传清除?
这就是我的做法,尽管我只需要为 IE 设计,所以我还没有在其他浏览器中测试过。此外,我使用标签而不是文本框来显示选定的文件名。
我必须感谢这个网站让我走上了正确的道路:http://www.codeproject.com/Tips/296593/To-trigger-Choose-file-to-Upload-dialogue-box-with
从本质上讲,我所做的是创建两个按钮,就像你所做的那样。我使用 CSS 使文件上传控制按钮与我的"假"按钮大小相同。然后,我将"fake"按钮的 z 索引设置为 -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>
- 如何在OnPaste方法中清除文本区域
- 如何防止在进行选择时清除文本框
- 如何使用Javascript在按Backspace键时清除文本框
- 如何从文本区域输入中清除文本
- 想要清除文本框+聚焦文本框+阻止asp.net在同一按钮上回发
- javascript onclick radio清除文本框
- 清除文本区域会中断其他JS函数
- Javascript:如何清除文本框并恢复其值
- 如何重新启用禁用的下拉列表以及如何清除文本框数据
- 如何在删除/后退/清除文本框中的文本时清除 td 内容
- 按钮在 jsfiddle 中起作用,但不清除文本编辑器中的有序列表
- jQuery/Javascript:如何使用Javascript或jQuery清除文本框上的最近搜索
- 通过单击清除文本输入
- 清除文本框,但使用 Java 脚本给出错误
- 取消选中复选框时隐藏和清除文本框
- IE 不会清除文本区域值
- JavaScript 清除文本框 DOM 仅清除顶部框
- 清除文本框字段后再次加载选择框
- 清除文本框 脚本不起作用
- 角度.js - Google 自动完成事件触发时的清除文本框