JavaScriptで.jpg, .jpeg, .pdfファイルの判定をする方法
- JavaScriptを使用して、HTMLのフォームでファイルをアップロードし、そのファイルが.jpg、.jpeg、.pdfフォーマットであるかどうかを判定する方法を紹介します。
- アップロードされたファイルが指定のフォーマットでない場合には、アラートメッセージを表示し、アップロードを制限します。
- 大文字と小文字は区別しない判定を行い、拡張子が.jpg、.jpeg、.pdfであるかどうかを確認します。
- ベストアンサー
javascriptで .jpg , .jpeg , .pdfファイルであることを判定
HTMLのフォーム文で、ファイルをアップロードしてもらい、それが.jpg, .jpeg , .pdf ファイルであった場合のみ、アップロードできるような仕組みをJavascriptを利用して作成中ですが、うまく行きません （ソース: test.php) --ここから-- <html></body> <SCRIPT language="JavaScript"> function mailSubmit(){ if (document.form_mail.upfile.value == "" ) { alert (" ファイルを選択してください。"); flag = 1; return; } else { if (document.form_mail.upfile.value.match(/[jpg]$/i)||(/[pdf]$/i)){ alert ("添付ファイルはJPEG,PDFに限ります"); flag = 1; // return; } } if(flag){ return false; } else { document.form_mail.submit(); return true; } } </script> <table> <!-- === FORMここから === --> <!-- <FORM METHOD="post" action="<?php print $_SERVER['PHP_SELF']; ?>" NAME="form_mail" ENCTYPE=multipart/form-data> --> <FORM METHOD="post" action="<?php print $_SERVER['PHP_SELF']; ?>" NAME="form_mail" ENCTYPE=multipart/form-data onSubmit="return mailSubmit()"> ファイル選択<INPUT TYPE=file NAME="upfile" SIZE=50 VALUE=\"$upfile\"> <br> <INPUT TYPE="button" VALUE=" 送信 " onClick=" javascript:mailSubmit() "> <INPUT TYPE="button" VALUE=" キャンセル " onClick="javascript:history.back()"> </FORM></body> </html> --ここまで-- JPG,JPEG,またはPDFファイルのみにアップロードの許可を与えるにはどうしたらいいでしょうか、(大文字・小文字は不問とします）ご回答いただければ幸いです。
- longstop
- お礼率100% (40/40)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
おはようございます。 > /[jpg]$/i [jpg]は文字クラスになるので、括弧内の文字の集合、すなわちjかpかgが最後についているか、という事になってしまいます。ですから、 /(jpe*g|pdf)$/i というような方法である程度チェック可能かと思います。 当然、拡張子を偽装したファイルのアップロードも可能としてしまいますので、出来ればPHP側でファイルタイプ（MIME）のチェックもした方が良いかと思います。ファイルタイプは $_FILES['upfile']['type'] で取得出来ます。通常、jpegはimage/jpeg、pdfはapplication/pdf、application/x-pdfあたりですね。 JavaScriptだけの判断ではとても危険です（いくらでも偽装出来る）ので、PHP側で再チェックをする事をお進めします。 参考まで。
その他の回答 (2)
/jpe*g|pdf/i これでどうでしょうか。
お礼
ご回答どうもありがとうございました。参考にさせていただきます
>document.form_mail.upfile.value これが希望の値を取れてるのか確認した方が良いんじゃない？ 中身が無い場合は "" (null) で良いかもしれないけど入ってる場合はobjectだったりして名前では持ってこれてないとかいうオチだったりしない？
お礼
ご回答ありがとうございます これは盲点でした、参考にさせていただきます
関連するQ&A
- ファイルアップロードを教えて下さい。
お世話になります。 php初心者です。 初歩的な質問になると思いますが… ローカルでファイルのアップロードのスクリプトの練習をしてるのですが上手く行きません。 アップロードしたファイル名が全て同じになります。 ディレクトリ構成として htdocs ├128.php └phpbook(ディレクトリ) └128-2.php ■128.phpの中身 <form action="./phpbook/128-2.php" enctype="MULTIPART/FORM-DATA" method="POST"> ファイル：<input type="FILE" name="upfile"> <input type="submit" value="アップロード"> </form> ■128-2.phpの中身 <?php if(move_uploaded_file($_FILES['upfile']['tmp_name'], "./htdocs/phpbook/") ==FALSE){ print "失敗しました。"; }else{ print ($_FILES['upfile']['name']); print "をアップロードしました。"; } ?> アップロードは出来てるのですが、phpbookディレクト内にphpbookという拡張子が何もついてないファイルがアップロードされてしまいます。 よろしくお願いします。
- ベストアンサー
- PHP
- ファイル選択と同時にアップロード HTML+JS
HTMLとJava Scriptのことを質問させてください <form>タグからファイルを選択すると同時をアップロードしたいと思っています。 複数の「ファイルを選択ボタン」を設置し、それぞれ"001.jpg"、"002.jpg"など指定の名前でアップロードしたいです。 下記のようにいくつかの<form>タグを設置し、javascriptでコントロールできるかと思いケース1のように書いた場合はうまくいったのですが、ケース2のように複数並べて記述した場合、動かなくなり困っております。 どなたか教えていただけないでしょうか？ よろしくお願いいたします ケース1） <form id="upload_file1" action="file_upload.php" method="post" enctype="multipart/form-data" target="upload_frame"> <input type="hidden" name="picture_id" value="001.jpg" /> <input type="file" id="file_id_1" name="file_name" accept="image/jpeg"> </form> <form id="upload_file2" action="file_upload.php" method="post" enctype="multipart/form-data" target="upload_frame"> <input type="hidden" name="picture_id" value="002.jpg" /> <input type="file" id="file_id_2" name="file_name" accept="image/jpeg"> </form> <script> var form = document.getElementById("upload_file1"); var input = form.file_name; input.onchange = function (){ if(this.value){ form.submit(); } }; </script> ケース2） <form id="upload_file1" action="file_upload.php" method="post" enctype="multipart/form-data" target="upload_frame"> <input type="hidden" name="picture_id" value="001.jpg" /> <input type="file" id="file_id_1" name="file_name" accept="image/jpeg"> </form> <form id="upload_file2" action="file_upload.php" method="post" enctype="multipart/form-data" target="upload_frame"> <input type="hidden" name="picture_id" value="002.jpg" /> <input type="file" id="file_id_2" name="file_name" accept="image/jpeg"> </form> <script> var form = document.getElementById("upload_file1"); var input = form.file_name; input.onchange = function (){ if(this.value){ form.submit(); } }; var form = document.getElementById("upload_file2"); var input = form.file_name; input.onchange = function (){ if(this.value){ form.submit(); } }; </script>
- ベストアンサー
- JavaScript
- formのfileの値をhiddenでも持ちたい
お疲れ様です。いつもお世話になっております。 on～～イベントで値をコピーするやり方でいけるのかもと思いつつ、 うまくイメージがまとまらないので質問させてください。 <input type="file">で、ファイルが選択されたら、その値(ファイルのパス)を同じフォーム内のhiddenにも持ちたいのです。 もっと具体的にいうと hiddenに持った時、ファイル名の拡張子にかかわらず、拡張子を落として、[ファイル名]_thumnail.jpgとつけて、submitしたいのです。 <form action="xxx.php" method="post" enctype="multipart/form-data" name="myForm"> <input type="file" name="upfile" /> <input type="hidden" name="thumnail" /> </form> document.myForm.upfile.value=document.myForm.thumnail.value; みたいな感じでできるのでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- PHP重複ファイルに連番をつけてアップロードしたい
ファイルをアップロードするページをPHPで作りました。 testup.htmlでファイルを選択し、 testup.phpでファイルをサーバーにアップする 簡単な仕組みです。 アップロードには成功したのですが、 同じファイル名のデータがある場合、上書きされてしまいます。 上書きされずに、連番等をファイル名に追加してアップロード できればと思いましたが、方法がわかりません。 当方PHPの初心者です。何卒お力をお貸しください。 よろしくお願い致します。 ソースを記入しておきます。 「testup.html」 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>test</title> </head> <body> テストアップローダー<br> <form action="testup.php" method="post" enctype="multipart/form-data"> アップロードするファイルを選択してください。 <br> <input type="file" name="upfile" size="30"><br> <br> <input type="submit" value="アップロード"> <label> <input type="reset" name="button" id="button" value="リセット" /> </label> </form> </body> </html> 「testup.php」 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>test</title> </head> <body> <p><?php if (is_uploaded_file($_FILES["upfile"]["tmp_name"])) { if (move_uploaded_file($_FILES["upfile"]["tmp_name"], "files/" . $_FILES["upfile"]["name"])) { chmod("files/" . $_FILES["upfile"]["name"], 0777); echo $_FILES["upfile"]["name"] . "をアップロードしました。"; echo "<br><br>ありがとうございました。"; echo "<br><FORM><INPUT TYPE=button value=閉じる onClick=window.close()></FORM>"; } else { echo "ファイルをアップロードできません。"; echo "<br>お手数ですが前の画面に戻ってもう一度ファイルをアップロードしてください。"; echo "<br><FORM><INPUT TYPE=button value=前のページに戻る onClick=JavaScript:history.back()></FORM>"; } } else { echo "ファイルが選択されていません。"; echo "<br>お手数ですが前の画面に戻ってファイルを選択してください。"; echo "<br><FORM><INPUT TYPE=button value=前のページに戻る onClick=JavaScript:history.back()></FORM>"; } ?></p> </body> </html>
- ベストアンサー
- PHP
- javascriptで困っています。教えてください
JavaScriptで配列をPOST送信しようとしています。 <form>や<input>を作っておいてではなく、javascriptで生成する関数からしたいと思っています。以下のコードでうまくいきません。 教えていただければありがたいです。よろしくお願いします。 <!DOCTYPE html> <html> <head> <script type="text/javascript"> var ar = new Array(5); ar[0] = 111; ar[1] = 222; ar[2] = 333; ar[3] = 444; ar[4] = 555; function sampleForm(value){ var form = document.createElement('form'); document.body.appendChild( form ); var input = document.createElement('input'); input.setAttribute('type','hidden'); input.setAttribute('name','hidden_input'); input.setAttribute('value', value); form.appendChild(input); form.setAttribute('action','send.php'); form.setAttribute('method','post'); form.submit(); } </script> </head> <body> <a href=“javascript:sampleForm(ar)”>クリックしたら“samplepost”をPOST送信</a> </body> </html> send.php-------------------------------- <?php $num = isset($_POST['hidden_input']) ? $_POST['hidden_input'] : null; print "num: " . $num; ?>
- ベストアンサー
- JavaScript
- JavaScript 初心者です。
急遽ホームページ作成をやることになり大変困っています。 何もかも初心者で全くわからない状態ですのでよろしくお願い致します。 お客様情報入力で送信ボタンで押すとメールで情報が届く様にしています。 送信ボタンを押したときに、入力チェックをかけているのですが、複数のテキストボックス(郵便番号を入力するテキストボックス)のチェック方法が分かりません。 郵便番号は、３桁－４桁で入力して頂く様にしています。 HTML(郵便番号のみです)・・・ <INPUT maxlength="3" size="3" type="text" name="iyubin" value="" style="ime-mode:disabled;" id="01">－<INPUT type="hidden" name="iyubin" value="－"><INPUT maxlength="4" size="4" type="text" name="zyubin" value="" style="ime-mode:disabled;" id="02"> JavaScriptでの入力チェック(省略をしていますが、正常に動作しているヵ所です)・・・ //お客様情報 function check(){ var flag = 0; // お名前 if ((flag==0) && (document.form.gName1.value == "")){ flag = 1; } if(flag){ window.alert('【お名前】を入力して下さい。'); // 入力されていない場合は警告ダイアログを表示 return false; // 送信を中止 } // ふりがな if ((flag==0) && (document.form.hName2.value == "")){ flag = 1; } if(flag){ window.alert('【ふりかな】を入力して下さい。'); // 入力されていない場合は警告ダイアログを表示 return false; // 送信を中止 } // 性別 if((flag==0) && (document.form.iSeibetsu.length)) { // 選択肢が複数ある場合 flag = 1; var i; for(i = 0; i < document.form.iSeibetsu.length; i ++){ if(document.form.iSeibetsu[i].checked){ flag = 0; break; } } } else{ // 選択肢が1つだけの場合 if((flag==0) && (!document.form.iSeibetsu.checked)){ flag = 1; } } if(flag){ window.alert('【性別】を選択して下さい。'); // 選択されていない場合は警告ダイアログを表示 return false; // 送信を中止 } //このヵ所に郵便番号の入力チェックを入れたいです。 すみませんが、よろしくお願い致します。
- 締切済み
- JavaScript
- ファイルのアップロード処理を確認画面で確認後にアップロードするようにし
ファイルのアップロード処理を確認画面で確認後にアップロードするようにしたいのですが、プログラムの書き方がわかりません。確認画面を通さずにやればアップロードできるのですが。どうすればいいのか教えてもらえるとうれしいです。 流れとしては「アップロード画面でファイルを指定」→「確認画面でアップロードボタンを押す」→「アップロード結果画面」です。作成中のソースは以下のようになっています。 ■upload.html（アップロード画面） <html><head><title>アップロード画面</title></head><body> <form action="kakunin.php" method="post" enctype="multipart/form-data"> ファイル：<br> <input type="file" name="upfile" size="30"><br> <input type="submit" value="確認画面へ"> </form></body></html> ■kakunin.php（確認画面）＜未完成＞ <html><head><title>確認画面</title></head><body> <?php $upfile=$_POST['upfile']; print "選択したファイル： $upfile<br>\n"; ?> <br>この内容でよろしいですか？<br> よろしければ「アップロード」ボタンを押してください。<br> <form action="uploadkekka.php" method="post" enctype="multipart/form-data"> <input type="submit" value="アップロード"> </form></body></html> ■uploadkekka.php <html><head><title>アップロード結果</title></head><body> <p><?php if (is_uploaded_file($_FILES["upfile"]["tmp_name"])) { if (move_uploaded_file($_FILES["upfile"]["tmp_name"], "uploadfiles/" . $_FILES["upfile"]["name"])) { chmod("uploadfiles/" . $_FILES["upfile"]["name"], 0644); echo $_FILES["upfile"]["name"] . "をアップロードしました。"; } else { echo "ファイルをアップロードできませんでした。"; } } else { echo "ファイルが選択されていません。"; } ?> </p></body></html>
- ベストアンサー
- PHP
- onSubmitでフォームの値を変える
PHP+SQLでサイトを作っています。 いまa.phpでメールアドレスを入力した後、 ”進む”を押すとb.phpにジャンプし、 ”戻る”を押すと$flagの値を変更し、a.php(自分自身)にジャンプするようにしたいと思っています。 一応、ジャンプできるところまではきたのですが、 $flagの値はの値はどのようにすれば、変更できるのでしょうか？ <form method="post" > <input type="text" name="mail_address" value=".$mail_address."> <input type="hidden" name="flag" value=".$flag."> <input type="submit" value="戻る" onClick="form.action='a.php'";return ture"> <input type="submit" value="進む" onClick="form.action='b.php'";return ture"> </form>
- 締切済み
- JavaScript
- IE6 で アップロードファイルサイズ
IE6 でアップロードしたファイルのサイズを取得したいです。 いろんなやり方を試しましたが、ページエラーばかり出てしまいます。 下記のようなフォームです。multipulの指定はなし。 ------------------------------------- <form name="frmFile" action=""> ｜ <input type="file" name="upfile" value=""> ｜ </form> ------------------------------------- <script type="text/javascript"> var filesize = document.frmFile.upfile.fileSize; </script> 上記のjavascriptではページエラーが出ます。 ファイルサイズを取得して、一定の値以上の容量であればアラートを出力する javascriptのプログラムを書きたいですが、エラーが出ていては前に進めません。 サイズの取得の仕方を教えてください。お願いします。
- ベストアンサー
- JavaScript
- javascriptでファイルを指定してアップロードができません
ファイルのアップロード機能を実装したいのですが <input type="file" />タグは画面に表示したくありません。 そのため「アップロードファイルを指定」ボタンを押すとダイアログが開き ユーザがファイルを指定するよう実装してあります。 以下のコードを書いたのですが「指定しない」ボタンでは正常に動作しましたが 「アップロードファイルを指定」ボタンでは、アクションも呼ばれませんでした。 これは何が問題なのでしょうか？ 教えていただけると助かります。 もしかして、javascriptから<input type="file" />を触る場合の セキュリティ制限でしょうか？ /**************** 環境 ****************/ jquery 1.3.2 php 5 ie7 /**************** html ****************/ $(document).ready(function(){ $('#btnyes').click(function() { var oldval = ''; $('#fileUpload').click(); // パスが指定されればpost if($('fileUpload').val() != oldval) { execSubmit(); } }); }); function execSubmit() { $('#formBeforeEdit').submit(); } /**************** javascript ****************/ <form name="formUpload" id="formUpload" action="/xxx/xxx" method="post" enctype="multipart/form-data"> <input type="button" name="yes" id="btnyes" value="アップロードファイルを指定" /> <input type="button" name="no" id="btnno" onclick="execSubmit();" value="指定しない" /> <input type="hidden" name="MAX_FILE_SIZE" value="10485760" /> <input type="file" name="fileUpload" id="fileUpload" style="display: none;"/> </form>
- ベストアンサー
- JavaScript
お礼
お返事遅れて申し訳ありません 大変わかりやすいご回答ありがとうございます さっそく試して、結果をご報告させていただきます