I came across a strange situation with a button and the fileupload control in IE only. I did find a temporary way around this issue, however i would like to find out what called be the actual cause of the issue and if there is a better way around it then what i have done.
我遇到了一个奇怪的情况,只有一个按钮和IE中的fileupload控件。我确实找到了解决这个问题的临时方法,但是我想找出问题的真正原因,如果有更好的方法,那么我做了什么。
There a few things to note about the application. 1. I am working with a masterpage 2. I have an updatepanel on the masterpage 3. Controls in question are on a clientPage 4. I have hidden the fileupload control and instead show users a "custom" file upload box within a modalpopup. Fileupload control is not on the modalpopup 5. The following works in all browsers except IE
关于该应用程序有一些注意事项。 1.我正在使用母版页2.我在母版页上有一个updatepanel 3.有问题的控件在clientPage 4上。我隐藏了fileupload控件,而是在modalpopup中向用户显示一个“自定义”文件上传框。 modalpopup 5上没有Fileupload控件。以下适用于IE以外的所有浏览器
Please note this has nothing to do with fileupload not working with updatepanels, i have already added the button used to upload the file as a trigger to the updatepanel.
请注意,这与fileupload无法使用updatepanels无关,我已经添加了用于将文件作为触发器上传到updatepanel的按钮。
How code works: A user clicks an image which causes the hidden fileupload to trigger and open browse file dialog box. Once user has selected the file, a modalpopup appears with a textbox and two buttons (browse and upload). The textbox has the file name, the browse button is used to open the browse file dialog box again, and the upload button is used to uplood the file.
代码的工作原理:用户单击一个图像,导致隐藏的文件上载触发并打开浏览文件对话框。用户选择文件后,会出现一个带有文本框和两个按钮(浏览和上传)的modalpopup。文本框具有文件名,浏览按钮用于再次打开浏览文件对话框,上传按钮用于上传文件。
This all works perfectly in all browers except IE. In IE the following happens: When user clicks the upload button it appears as nothing has happened, if they click the button again it then fires the button event, but then the fileupload control states that is has no file.
这一切都适用于除IE以外的所有浏览器。在IE中,会发生以下情况:当用户单击上传按钮时,它似乎没有发生任何事情,如果他们再次单击该按钮,则会触发按钮事件,但随后文件上载控件指出没有文件。
After i unhide the fileupload control I found that the following was happening: On first button click the fileupload was being cleared, and not doing a postback. Second button click the postback occured but fileupload is now empty resulting in my control not having any file.
在取消隐藏文件上载控件后,我发现发生了以下情况:在第一个按钮上单击文件上载正在被清除,而不是回发。第二个按钮单击回发发生,但fileupload现在为空,导致我的控件没有任何文件。
To get around this i did the following. On the button's first click i fire a clientside event and using jquery do the following if the browser is IE: Take the full filename and path of the file from the fileupload control and set it as the value for a hidden field (possible due to IE not hiding filepath like other browsers). Then force it to fire the click event for another button, that goes to a different onclick method to upload the file.
为了解决这个问题,我做了以下工作。在按钮的第一次单击我触发客户端事件并使用jquery如果浏览器是IE,请执行以下操作:从fileupload控件获取文件的完整文件名和路径,并将其设置为隐藏字段的值(可能由于IE不像其他浏览器那样隐藏文件路径)。然后强制它触发另一个按钮的click事件,然后转到另一个onclick方法上传文件。
Code:
image
<a onclick="uploadKycSubType('Identity','','0')">
<img src="../images/upload.png">
</a>
modal popup and fileupload control:
模态弹出和文件上载控件:
<cc1:ModalPopupExtender ID="ModalPopupExtender4" runat="server" TargetControlID="hdnTarget4" PopupControlID="pnlUpload" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<cc1:AnimationExtender ID="AnimationExtender4" runat="server" TargetControlID="btnUploadClose">
<Animations>
<OnClick>
<Sequence AnimationTarget="pnlUpload">
<Parallel AnimationTarget="pnlUpload" Duration=".7" Fps="20">
<Move Horizontal="200" Vertical="200"></Move>
<Scale ScaleFactor="0.05" FontUnit="px" />
<FadeOut />
</Parallel>
<StyleAction Attribute="display" Value="none"/>
<StyleAction Attribute="height" Value=""/>
<StyleAction Attribute="width" Value=""/>
<StyleAction Attribute="fontSize" Value="14px"/>
<EnableAction AnimationTarget="btnUploadClose" Enabled="true" />
</Sequence>
</OnClick>
</Animations>
</cc1:AnimationExtender>
<asp:FileUpload ID="imageUpload" CssClass="fileInput" runat="server" onchange="$('#hiddenText').val($(this).val().split('\\').pop());uploadChange();" />
<asp:Panel ID="pnlUpload" runat="server" CssClass="Modal_Upload" >
<table width="100%" style="border-collapse:collapse">
<tr>
<td colspan="2">
<h2><%#bindValue("UploadDocument")%></h2>
</td>
</tr>
<tr >
<td colspan="2">
<p><%#bindValue("UploadDocumentInfo")%>.</p>
</td>
</tr>
<tr>
<td>
<div class="hide">
<input type="text" class="textbox" id="hiddenText"/>
</div>
<input type="text" class="textbox" id="imageText" style="width:350px"/>
</td>
<td>
<input type="button" value="<%#bindValue("Browse")%>" onclick="browse()" class="buttonClose" />
</td>
</tr>
<tr>
<td>
<div class="AddSpace">
</div>
<asp:Button runat="server" ID="btnUploadClose" CssClass="buttonClose" OnClick="btnClose_Click"/>
</td>
<td>
<div class="AddSpace">
</div>
<asp:Button runat="server" ID="btnUpload" CssClass="buttonShort" OnClick="btnKycUpload_Click" OnClientClick="uploadIEKyc();"/>
</td>
<asp:Button runat="server" ID="Button1" CssClass="fileInput" OnClick="btnKycUploadIE_Click"/>
</tr>
</table>
</asp:Panel>
jquery functions
function uploadKycSubType(link,bankAccount,bankNumber) {
$("#<%= hdnEdit.ClientID %>").val(link);
$("#<%= hdnBank.ClientID %>").val(bankAccount);
$("#<%= hdnBankNumber.ClientID %>").val(bankNumber);
browse();
}
function browse(){
$('#<%= imageUpload.ClientID %>').click();
}
function uploadChange() {
$('#imageText').val($('#hiddenText').val());
if($("#<%=pnlUpload.ClientID %>").css("display") == "none")
$find("MainContent_ModalPopupExtender4").show();
}
function uploadIEKyc() {
var ua = $.browser;
if (ua.msie) {
$('#<%= hdnFile.ClientID %>').val($('#<%= imageUpload.ClientID %>').val());
$('#<%=Button1.ClientID %>').click();
}
}
Postbehind
Add button to trigger
添加按钮以触发
protected void Page_Init(object sender, EventArgs e)
{
PostBackTrigger trigger = new PostBackTrigger();
trigger.ControlID = btnUpload.UniqueID;
UpdatePanel up = (UpdatePanel)Page.Master.FindControl("Updatepanel1");
up.Triggers.Add(trigger);
}
uploadfile click events
uploadfile单击事件
protected void btnKycUpload_Click(object sender, EventArgs e)
{
if (imageUpload.HasFile)
{
//do file upload
}
else
{
this.ShowInstruction(ErrorName.DocumentNotSaved, Session["username"] == null ? string.Empty : Session["username"].ToString());
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "ScrollTo", "topScreen();", true);
}
}
protected void btnKycUploadIE_Click(object sender, EventArgs e)
{
string files = hdnFile.Value;
if (!string.IsNullOrEmpty(files))
{
FileInfo fi = new FileInfo(files);
string fileName = fi.Name;
string fileExtension = fi.Extension;
fileExtension = fileExtension.Substring(fileExtension.IndexOf(".") + 1);
//do file upload
}
else
{
this.ShowInstruction(ErrorName.DocumentNotSaved, Session["username"] == null ? string.Empty : Session["username"].ToString());
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "ScrollTo", "topScreen();", true);
}
}
If you require any thing else in regards to this, let me know, other wise thank you for your time and help.
如果您对此有任何其他要求,请告诉我,其他明智的感谢您的时间和帮助。
1 个解决方案
#1
0
put your modal popup in a form and give a try.
把你的模态弹出窗口放在一个表单中并尝试一下。
Check this post
查看这篇文章
It may help you
它可能会帮助你
#1
0
put your modal popup in a form and give a try.
把你的模态弹出窗口放在一个表单中并尝试一下。
Check this post
查看这篇文章
It may help you
它可能会帮助你