JavaScriptでファイルを指定してアップロードができない理由は?

このQ&Aのポイント
  • ファイルのアップロード機能を実装したい場合、<input type='file' />タグを使用します。
  • しかし、<input type='file' />タグを画面に表示したくない場合、ボタンを作成し、そのボタンがクリックされた際にダイアログを開いてファイルを指定するように実装する方法があります。
  • ただし、上記の方法では「指定しない」ボタンでは正常に動作するが、「アップロードファイルを指定」ボタンではアクションが呼ばれない場合があります。これはJavaScriptから<input type='file' />を操作する際のセキュリティ制限によるものである可能性があります。
回答を見る
  • ベストアンサー

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>

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

> もしかして、javascriptから<input type="file" />を触る場合の > セキュリティ制限でしょうか? おそらくそうでしょう。 以前実験しましたが、コードでclickを使ってファイル選択ダイアログを表示した場合は、そのままsubmitを実行できないようになっているようです。 <input type="file">タグにnameを指定しないと、submitできる時もありますが。

diz108
質問者

お礼

> おそらくそうでしょう。 やはりそうですか。 <input type="file">タグのクリックイベントを走らせ ユーザさんにファイルを選択して貰っているのでいけるかと思ったんですが 無理なのですね。。 どうもありがとうございました。

関連するQ&A

  • ファイル選択と同時にアップロード 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>

  • ファイルアップロードについて

    ファイルアップロードについて質問させて下さい。 ID、ファイルアップロードの機能の2つがあります。 ファイルを指定し、submitボタンを押下すると「b.php」に遷移します。 ファイルをアップロードした場合には遷移をせず ID、画像パスが入力されている場合のみ「b.php」に遷移したいのです。 入力チェックはjavascriptで行っていますが、その場合には「action=""」として javascript側で遷移するしか方法は無いのでしょうか? ---a.php---- <form enctype="multipart/form-data" action="b.php" method="post" name="a"> <input type="hidden" name="MAX_FILE_SIZE" value="50000000" /> <table> <tr> <th>ID</th> <td><input type="text" name="ID" value=""></td> </tr> <tr> <th>画像</th> <td><input type="file" name="img" value=""> <input type="submit" name="upload" value="upload"> </td> </tr> </table> <a href="#" onClick="javascript:check('a');"><img src="button.jpg"></a> </form> お手数ですが、ご教授よろしくお願い致します。

    • ベストアンサー
    • PHP
  • javascriptでinput属性の入力

    複数のボタンがあります。 それぞれのボタンによって、value値を変えたいと考えています。 通常であれば <button class='button' type='submit' name='volume' value='350'>350購入</button> <button class='button' type='submit' name='volume' value='450'>450購入</button> という形を利用しますが、理由があり、 type='submit' を使用できません。 そこで、 <input id="button350" type="button" value="350購入" /> <input id="button450" type="button" value="450購入" /> というsubmit属性の無いボタンを使用しながら、「javascriptを使いname value を抽出しsubmitまで持っていく」ことを考えています。 そこで、下記のようなものを2種類(350と450は別の記載方法でテスト)作ってみましたが、いずれもsubmitは出来ますが、value値を渡すことが出来ません。 どのように書けば、name属性にvalue値を渡すことが可能でしょうか? <form action="abc.php" method="post" name="form2" id="form2"> <script> $(function(){ $('#button350').click(function() { $('input[type=\'submit\']'); $('input[name=\'volume\']'); $('input[value=\'350\']'); $('#form2').submit(); }); $('#button450').click(function() { $('input[type=\'submit\'],[name=\'d4_buy_stock_volume2\'],[value=\'450\']'); $('#form2').submit(); }); }); </script> <BR> <BR> <input id="button350" type="button" value="350購入" /> <BR> <input id="button450" type="button" value="450購入" /> </form>

  • fileUploadオブジェクトへの値の代入 (困っています。教えてください。m(__)m)

    こんばんは。 fileUploadオブジェクトへの値の代入がどうにもこうにもできません。 いったいどうしたらいいのでしょうか?どうか助けてください。 よろしくお願いいたします。m(__)m -- <HTML><BODY> <FORM NAME="myFormF"> <INPUT TYPE="file" NAME="myFile"> <INPUT TYPE="button" value="set FILEFILE -> file" onClick="document.myFormF.myFile.value='FILEFILE'"> <INPUT TYPE="submit" onClick="alert(document.myFormF.myFile.value)"> </FORM> <FORM NAME="myFormT"> <INPUT TYPE="text" NAME="myText"> <INPUT TYPE="button" value="set TEXTTEXT -> text" onClick="document.myFormT.myText.value='TEXTTEXT'"> <INPUT TYPE="submit" onClick="alert(document.myFormT.myText.value)"> </FORM> </BODY></HTML> -- key: fileUpload object,ファイルアップロードオブジェクト,WSH,javascript

  • javaで name=id[?] を指定する方法とは?

    ショップ運営で、商品一覧から+-ボタンでそれぞれ数の増減をさせるよう、ほかのサイトを参考にして下記のようにjavascriptで記述してみました。 このうち、商品2と3はボタンが機能したのですが、商品1は数の増減ができません。 おそらく要素名に(name=id[1])と[]で囲っているからだと思うのですが、この[]を取らないまま、ボタンを機能させる方法はありますでしょうか? よろしくお願いします。 <FORM> 商品1:<INPUT type=text name=id[1] value=3 size=4> <INPUT type=button value="+" onClick="plus(this.form.id[1])"> <INPUT type=button value="-" onClick="minus(this.form.id[1])"> <BR> 商品2:<INPUT type=text name=id2 value=3 size=4> <INPUT type=button value="+" onClick="plus(this.form.id2)"> <INPUT type=button value="-" onClick="minus(this.form.id2)"> <BR> 商品3:<INPUT type=text name=id3 value=3 size=4> <INPUT type=button value="+" onClick="plus(this.form.id3)"> <INPUT type=button value="-" onClick="minus(this.form.id3)"> </FORM> <SCRIPT language="JavaScript"> <!-- function plus(chk){chk.value++; if (chk.value==6) {chk.value=5} } function minus(chk){chk.value--; if (chk.value==0) {chk.value=1} } // --> </SCRIPT>

  • フォームの一部のfileを送信

    上手に出来る方法をアドバイス下さい。 <form method="post" name="uploadForm" id="uploadForm" enctype="multipart/form-data" action="aaa.php"> <input type="text" name="text1" id="text1"> <input type="file" name="upload_file" id="upload_file"> <input type="button" value="アップロード"> <input type="text" name="text2" id="text2"> <input type="submit" value="送信"> </form> のようなフォームで「アップロード」が押された場合、"upload_file"だけ送信したいのですが上手い方法があるでしょうか? また、「送信」が押された場合、"upload_file"以外を送信したいです。 「POST先で無視をする」以外でお願いします。

  • PHP用ファイルアップロード機能について

    ドコモ端末でPHPのファイルアップロード機能を使えるようにしたいのですが、どのようにすればいいでしょうか? ちなみに、vodafoneならこの機能が使えます。 ドコモ端末で下のソースにアクセスすると、 ファイルを参照するボタンが見えず、ファイルをアップロードできません。 HTMLはキャリア毎に使えるタグがあるのは知っていますが、下のソースの場合はどのように変更すれば良いのでしょうか?ご教授下さい。宜しくお願いします。 #ソースはコレです。 <form method="post" action="upload_save.php" enctype="multipart/form-data"> <input type="hidden" name="max_file_size" value="1000000" /> <input type="file" name="upload_file" size="70"><br /> (上書き禁止) <input type="checkbox" name="forbidden" value="1" checked /> <input type="submit" value="アップロード" /> </form> #ファイル自体はphpですが、中身はほぼHTMLに関する質問になってしまい、申し訳ありません。

    • ベストアンサー
    • PHP
  • 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
  • jQueryでファイルアップロード

    お世話になります。 jQueryでファイルアップロードの処理をしたいのですがやり方を教えて下さい。 Googleで検索すると色んなプラグインが出てくるのですが全体像がわからない為上手く動作してくれません。 やりたいのは、入力画面-->確認画面-->結果確認画面と遷移させてファイルをアップロードする処理です。 <画面仕様> (1)入力画面 ・氏名等の入力とアップロードするファイルの選択 ・アップロードファイルサイズのチェック (2)確認画面 ・入力画面で入力した内容の確認 ・アップロードするファイルの確認(個数、合計サイズ) (3)結果確認画面 ・アップロード処理結果の確認 ※実際のアップロードが入力画面でファイルを選択した直後に行われても構わない 嵌っているのは、入力画面でFORMのonsubmitと<input type="file">の両方を同時に設定できない事です。 FORMのonsubmitでは入力内容のチェックを、<input type="file">ではファイルのアップロードを行い、アップロードしたファイル名を隠しフィールドで確認画面に送りたいのですが、個々に指定するとそれなりに動くのに両方指定するとsubmitが優先されてしまい、<input type="file">のchengeイベントが動きません。 どうしたら良いかご教示下さい。 中途半端なソースですが、入力画面で私がやりたいことをコードにしてみました。 よろしくお願いします。 $(function() { $('#fileId').change(function() { $(this).upload('upload.php', function(res) { $(res).insertAfter(this); }, 'html'); }); }); <form id="form1" name="form1" action="confirm.php" method="post" enctype="multipart/form-data" onsubmit="return error_check();"> <input type="file" name="upload_file1" id="fileId" />

  • formの入れ子の回避方法

    アドバイス下さい。 <form method="post" name="addForm" id="addForm" action="aaa.php"> <input type="text" name="textA" id="textA"> <form method="post" name="uploadFormA" id="uploadFormA" enctype="multipart/form-data" action="aaa.php"> <input type="text" name="text1" id="text1"> <input type="file" name="upload_fileA" id="upload_fileA"> <input type="button" value="アップロード"> </form> <form method="post" name="uploadFormB" id="uploadFormB" enctype="multipart/form-data" action="aaa.php"> <input type="text" name="text2" id="text2"> <input type="file" name="upload_fileB" id="upload_fileB"> <input type="button" value="アップロード"> </form> <form method="post" name="uploadFormC" id="uploadFormC" enctype="multipart/form-data" action="aaa.php"> <input type="text" name="text3" id="text3"> <input type="file" name="upload_fileC" id="upload_fileC"> <input type="button" value="アップロード"> </form> <input type="text" name="textB" id="textB"> <input type="submit" value="送信"> </form> のような、formが入れ子になってしまっているformがあります。 これを回避する方法を教えていただきたいです。 条件としては、 ・見た目はこの順番がいい。 ・javascript、CSS等なんでも良いです。 ・各「アップロード」ボタンで、text1,2,3,4、upload_fileA,B,C,Dを送信、「送信」ボタンでtextA,Bを送信したい。 以上、お願いいたします。

    • ベストアンサー
    • HTML

専門家に質問してみよう