タイトルが適当かどうか謎ですが、画像をアップロードするためにhtmlのみで書いたフォームがあります。
【html部分】
<form method="post" action="page2.html" enctype="multipart/form-data" ></form><p class="input_area"> <input type="file" name="image_1" id="image_1" accept="image/gif,image/jpeg,image/png"> </p> <p> <button type="submit">送信する</button> </p>
この場合、inputで選択した画像は、送信先のpage2.htmlで問題なくアップロードされたことを確認できました。
続いて、ひと手間加えるためにJavascript(jQuery)を交えて書いたものが下記です。
【html部分】
<form method="post" action="page2.html" enctype="multipart/form-data" ></form><p class="input_area"> <span>何かしらの文字列</span> <input type="button" id="span_reset" value="spanとこのボタンを消してフォームを生成" /> </p> <p> <button type="submit">送信する</button> </p>
【JS部分】
//リセットボタンを押す
$('#span_reset').click(function(){
//input_area内の要素(この場合はspanとボタン)を消す $('.input_area').empty(); //input_area内に新しくフォーム(type="file")を生成する $('.input_area').html('<input type="file" name="image_1" id="image_1" accept="image/gif,image/jpeg,image/png">');
});
htmlだけで書いたものと違う点は、
「input_area内の要素を消してフォーム(input)を生成し、そのフォームで画像をアップロードしたい」
という動作を加えた点です。
その結果、フォーム生成もそのフォームでの画像選択も画面上で確認する限りは特に問題ないのですが、いざ送信すると送信先のpage2.htmlでは画像のアップロードを確認できませんでした。
不心得者としては「htmlで書いてもJSで書いても、input要素はinput要素だから同じように動くだろう」と思っていたので、何が原因なのか考えが及びません。
何卒ご教授下さい。よろしくお願いいたします。
jQueryのバージョンは1.10.2
ブラウザはchrome
で試しています。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。