ボタンとIEのみのファイルアップロードコントロールで奇妙な状況に遭遇しました。この問題を回避する一時的な方法を見つけましたが、問題の実際の原因と呼ばれるものを見つけたいと思います。それを回避するより良い方法がある場合は、私が行ったことです。
申請にあたって注意事項があります。1. masterpage で作業しています 2. masterpage に updatepanel があります 3. 問題のコントロールは clientPage にあります 4. fileupload コントロールを非表示にし、代わりに modalpopup 内の「カスタム」ファイル アップロード ボックスをユーザーに表示します。Fileupload コントロールは modalpopup 5 にありません。以下は、IE を除くすべてのブラウザーで機能します。
これは updatepanel で動作しない fileupload とは関係がないことに注意してください。ファイルをアップロードするために使用されるボタンをトリガーとして updatepanel に既に追加しています。
コードの仕組み: ユーザーが画像をクリックすると、隠しファイルのアップロードがトリガーされ、ファイルの参照ダイアログ ボックスが開きます。ユーザーがファイルを選択すると、モーダル ポップアップが表示され、テキスト ボックスと 2 つのボタン (参照とアップロード) が表示されます。テキストボックスにはファイル名があり、参照ボタンはファイル参照ダイアログボックスを再度開くために使用され、アップロードボタンはファイルをアップロードするために使用されます。
これはすべて、IE を除くすべてのブラウザーで完全に機能します。IE では、次のことが起こります。ユーザーがアップロード ボタンをクリックすると、何も起こらなかったように見えます。ボタンをもう一度クリックすると、ボタン イベントが発生しますが、ファイルアップロード コントロールにはファイルがないと表示されます。
ファイル アップロード コントロールを再表示した後、次のことが起こっていることがわかりました。2番目のボタンをクリックするとポストバックが発生しましたが、ファイルのアップロードが空になり、コントロールにファイルがなくなりました。
これを回避するために、次のことを行いました。ボタンの最初のクリックで、クライアント側のイベントを発生させ、ブラウザーが IE の場合は jquery を使用して次のことを行います: fileupload コントロールからファイルの完全なファイル名とパスを取得し、非表示フィールドの値として設定します (IE により可能)他のブラウザのようにファイルパスを隠しません)。次に、別のボタンのクリックイベントを強制的に発生させ、別の onclick メソッドに移動してファイルをアップロードします。
コード：
画像
<a onclick="uploadKycSubType('Identity','','0')">
<img src="../images/upload.png">
</a>
モーダルポップアップとファイルアップロードコントロール:
<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関数
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();
}
}
ポストビハインド
トリガーにボタンを追加
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);
}
アップロードファイルクリックイベント
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);
}
}
これに関して他に何かご要望がございましたら、お知らせください。それ以外の場合は、お時間を割いてご協力いただきありがとうございます。