- ベストアンサー
jQueryでファイルアップロードの処理方法と画面仕様
- 入力画面から確認画面、結果確認画面への遷移とファイルアップロード処理をjQueryで実装する方法について解説します。
- 具体的な画面仕様として、入力画面では氏名などの入力とファイルの選択、確認画面では入力内容とアップロードするファイルの確認、結果確認画面ではアップロード処理の結果を確認することができます。
- また、問題となっているのは入力画面でのフォームのonsubmitと<input type="file">の両方を設定することができないことです。この問題に対して解決方法を提案します。
- miruha2011
- お礼率94% (94/99)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
次の部分を変更して試したところ、問題なく動作しました。 ※ちなみに、イベントが発生するかの有無の確認なのでアップロード用のプラグインは使っていません。 変更前> $(function() { 変更後> $(document).ready(function() { 以下はソースです。お試し下さい。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> <!-- $(document).ready(function() { alert("ready"); $("#fileId").change(function() { alert("fileId: ChangeEvent"); }); }); function error_check() { return true; } --> </script> <title>Insert title here</title> </head> <body> <form id="form1" name="form1" method="post" action="confirm.php" enctype="multipart/form-data" onsubmit="return error_check();"> <input type="file" name="upload_file1" id="fileId" /> <input type="submit" /> </form> </body> </html>
お礼
教えて頂いた方法で期待通りの動作を確認できました。 大変助かりました。 ありがとうございます。