フォームサブミットを無効にして、Ajaxリクエストを送信しようとしています。 が動作していません。 私は単にsubmit()
と呼ぶと、そのページはリダイレクトされます。form.submit()をオーバーライドできません
私はthisのようなものを実装しようとしています。
jqueryバージョンの問題である可能性がありますか、間違っていますか?
これは私の試みです:
$('#fileUploadField').on("change", function() {
$("#upload_file").submit(function(e) {
alert("override");
e.preventDefault();
});
});
.hidden2{
margin:0;
padding:0;
position: absolute;
top: 0;
right: 0;
height: 100%;
font-size: 50px;
cursor: pointer;
opacity: 0;
-moz-opacity:0;
filter: Alpha(Opacity=0);
}
img.fileDownload
{
height: 26px;
width: 26px;
padding: 0;
display: inline-block;
vertical-align: middle;
margin: 0 4px 0 0;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
}
div.hiddenFileInputContainter
{
position: relative;
display: inline-block;
width: 27px;
height: 27px;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="upload_file" action="upload.php" method="post" enctype="multipart/form-data">
<div class="hiddenFileInputContainter">
<img class="fileDownload" src="http://b.dryicons.com/images/icon_sets/coquette_part_2_icons_set/png/128x128/attachment.png" width="10" height="10">
<input id="fileUploadField" type="file" name="uploaded_file" class="hidden2">
</form>
が働いた! 、明らかに私はそれを呼び出す前にそれをオーバーライドする必要があります(これは奇妙です)、私はページを残さずにファイルをアップロードしようとしているより良い方法はありますか? –
ページを離れたくない場合は、フォーム全体をバックエンドに送信するのではなく、リクエストを行うためにajaxが必要です(つまり、あなたの 'upload.php'アクション)。 Ajaxリクエストでは、フォームデータをシリアル化してバックエンドに投稿します。あなたのajaxリクエストの成功ハンドラは、バックエンドから返されたデータを使ってクライアント側の作業を実行できます。 http://api.jquery.com/jquery.ajax/ –
を参照してください。私は実際には入力ファイルだけではなく、変更イベントでもajaxを呼び出すのに十分だと思います。 –