私は MVC 3、javascript、jQuery を使用しています。
JavaScript から click() 関数を呼び出す必要がある非表示のボタンがあります。これは、IE9 を除くすべてのブラウザーでうまく機能します。
$('#fakeSubmitBt').click(function () {
$('#fileUplSubmitBt').click();
});
ここで、fileUplSubmitBt は非表示のボタンで、fakeSubmitBt は表示されているボタンで、代わりにクリックする必要があります。3回電話したら気がついた
$('#fileUplSubmitBt').click();
その後、フォームは送信されますが、バックエンドではフォームの要素が認識されません。
更新: Ricardo と Jay からのヒントのおかげで、trigger('click') を使用しようとしましたが、このパスも失敗しました。
以下に、私を恥じているコードを投稿します (Razor を使用した MVC3 です)。
<script type="text/javascript">
function s2cPanelReady() {
$('#fakeBrowseBt').click(function () {
$('#fileUplRadio').prop("checked", true);
$('#gravatarRadio').prop('checked', false);
$('#realFileUpload').click();
});
$('#fakeSubmitBt').click(function () {
if ($('#gravatarRadio').prop("checked")) {
$('#grvatarSubmitBt').click();
} else if ($('#fileUplRadio').prop("checked")) {
$('#fileUplSubmitBt').trigger('click');
}
});
}
</script>
<div class="inputForm">
<div class="inputField">
<div class="userPicLargeFrame">
<img src="/Images/Get?id=@Model.ID&size=40" class="userPicLarge" />
</div>
</div>
@using (Html.BeginForm("ChangePicture", "User"))
{
<div class="inputField">
<input type="radio" id="gravatarRadio" />
<span class="inputLabel">Gravatar:</span>
@Html.EditorFor(model => model.Preferences.GravatarEmail)
@Html.ValidationMessageFor(model => model.Preferences.GravatarEmail)
</div>
<input id="grvatarSubmitBt" type="submit" value="Save Pic" style="display:none;" />
}
@using (Html.BeginForm("UploadPicture", "User", FormMethod.Post, new { encType = "multipart/form-data", name = "uplPicForm" }))
{
<div class="inputField">
<input type="radio" id="fileUplRadio" />
<span class="inputLabel">Save your own pic:</span>
<span class="inputLabel">
<span style="display:inline-block; position:relative;">
<input type="file" id="realFileUpload" name="fileUpload" style="position:relative; opacity:0; -moz-opacity:0 ;" />
<span style="display:inline-block; position:absolute; top:0px; left:0px;">
<input id="fakePathBox" type="text" value="" readonly />
<input id="fakeBrowseBt" type="button" value="..."/>
</span>
</span>
</span>
<input id="fileUplSubmitBt" type="submit" name="submit" value="Upload" style="display:none;" />
</div>
}
<div class="inputField">
<span class="inputLabel">
<input id="fakeSubmitBt" type="button" value="Submit" class="s2cButton" />
</span>
</div>
</div>
更新 N.2: すべての JavaScript を削除しようとしましたが、単純な送信ボタンでファイル アップロード HTML タグを配置するだけです。この場合、IE9 ではフォームを送信できません!!
実行される場合もあれば、最初のクリックでは起動されず、2 回目のクリックでのみ起動される場合もあります (この場合、送信されたフォームは選択されたファイルを取得していないため、サーバー側でエラーが発生します...)。何回クリックしても、送信ボタンが起動しない場合があります。
この問題は私を夢中にさせ始めます....
他のヒントはありますか?
どうもありがとうございました!
一番
シゲルシ