• ベストアンサー

<input type="file">で条件分岐

<input type="file">で、送信ボタンをクリックする前に、下記のようなことをしたいです。 どうやるのでしょうか？ ■A ・ファイルを選択したかどうか、の条件分岐 ■B ・選択したファイル名を、JavaScript変数へ格納

  • re97
  • お礼率80% (601/744)

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

  • ベストアンサー
  • b0a0a
  • ベストアンサー率49% (156/313)
回答No.1

ファイルはinput.filesに入っています。 var file = input.files[0] if (file) とかで分かります。

re97
質問者

お礼

回答ありがとうございました。 参考になりましたー

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • <input type="file">アップロード

    下記教えて下さい <input type="file" name="datafile"> <input type="submit" value="送信する"> 上記を使ってファイルのアップロード機能を作りたいのですが、 (1)ファイル選択していない状態で「選択されていません」となるので 　文字を消したい（文字を非表示、または違う文言にしたい）場合、どこで設定するのでしょうか。 (2)送信するボタンを置かずに、選択時にそのまま送信処理につなげたいのですが 　どのようにすれば良いでしょうか。

    • ベストアンサー
    • HTML
  • <input type="file">のイベントについて

    <input type="file">でファイルを選択した時点にイベントを追加する方法を教えてもらえませんか？ セキュリティの観点から無理なのでしょうか？

  • input type="file"で複数選択を可能にする方法

    初めて利用させていただきます。初心者の為、できれば詳細なご回答いただけると嬉しいです。 早速ですが、<input type="file">の実行結果は、テキストエリアの横に【参照】ボタンがあるような状態になります。 このテキストエリアの部分に複数のファイルをどんどん選択して格納できる方法を探しております。 イメージとして、3行くらいがデフォルト表示のテキストエリアがあり、その横に【参照】と【削除】ボタンが上下に並び、 参照で選択したファイルがそのテキストエリアに格納されてゆき、3行を超えるとスクロールバーが表示される、 格納されたあるファイル名を反転させて【削除】選択で削除される、 というものを作りたいのです。 今回、クライアントの要望で添付ファイルは1000個まで選択可能という状態を実現しなくてはならず、<input type="file">を1000個並べる訳にもいかない為、とても困っております。 且つ、java script禁止令を出されています。 ファイル形式はjspですので、formのactionでサーバ側で処理を制御することは可能です。 念の為、私が探し出したソースで一番理想に近いものを併記致します。 <table> 　<tr> 　　<td rowspan="2" nowrap><select name="File" size="3" multiple> <option value="">　　　　　　　　　　　　　　　　　　　　　　　　　</select></td> 　 <td> 　　<iframe width="60" height="25" frameborder="no" scrolling="no" src="とあるexeファイルを指定"></iframe> 　　</td> 　　<td rowspan="2" valign="top" nowrap><font size="-1">「参照...」ボタンをクリックして<br>ファイルを指定してください。</font></td> 　</tr> 　<tr> 　　<td nowrap><input type="button" value=" 削除 " onClick="RemoveFile( this.form )"></td> 　</tr> </table>

  • <input type="file">について

    <input type="file">のボタン部分に色を付けたり、背景画像を敷きたいのですが、 ボタン部分ではなく、文字入力エリアに色が付きます。 文字入力のところはそのままで、ボタンだけにスタイルシートをかけることはできるのでしょうか？ よろしくお願いします。

    • ベストアンサー
    • HTML
  • JavaScriptのfileオブジェクト（input type="file"）の選択を初期化したい

    fileでユーザーが選択したファイルを、未選択の状態にしたいのですができません。 valueプロパティを""にしてもnullにしても、元の値（ファイルパス）が入ったままです。 HTML: <input type="file" name="picture_file"> JavaScript: document.form_main.picture_file.value = ""; alert(document.form_main.picture_file.value); document.form_main.picture_file.value = null; alert(document.form_main.picture_file.value); どうにかして初期化する方法はありますでしょうか？file以外のほかのinput項目は変更せず、また画面遷移もせず実現する必要があります。

  • input TYPE="FILE"で取得した画像を表示

    お世話になります。 htmlのタグにinput type="file"というのがありローカルの画像を選択できるエクスプローラが起動するというボタンなのですが、それで選択した画像ファイルをサーバ処理を行うことなくブラウザに表示させたいのです、こんなことが可能なのでしょうか？ なにかサンプル等ご存知の方宜しくお願いします。

    • ベストアンサー
    • HTML
  • <input type="file">タグで「キャンセル」か「開く」を取得したい

    いつもお世話になります。 <input type="file">タグで、 ファイル選択ダイアログを開いたあとに、 「キャンセル」を押したのか、 ファイルを選択したのか（「開く」を押したのか）を 取得する方法はないのでしょうか？ よろしくお願いします。

  • input type="file"の入力チェック

    よろしくお願い致します。 入力チェックページ付きのメールフォームについて、添付ファイルを必須項目にしたいと考えております。 <input type="text" name="お名前" />の場合は、以下のようなコードで入力チェックしております。 if($DATA['お名前'] == ""){ $err.="【お名前】を入力して下さい。\n"; } <input type="file" name="添付ファイル" />の添付ファイルも同じコードで試してみたところ、 if($DATA['添付ファイル'] == ""){ $err.="【添付ファイル】を選択して下さい。\n"; } ファイルの添付の有無に関わらず、「添付ファイルを選択して下さい。」というエラーコードが常に表示されます。 「input type="file"」の場合の入力チェックはどのようなコードを書けば良いのでしょうか？

    • 締切済み
    • PHP
  • jQuery.uploadとtype="file"

    ■IEで input type="file" を画像差し替えしたのですが、正しく動きません。 画像アップロードをファイル選択と同時に行うため、下記jQuery.uploadを実装しました。 http://lagoscript.org/jquery/upload しかし、input type="file" のままだと見た目が悪いため、追加で下記実装を行いました。 (全く同じ実装を行いました) http://zxcvbnmnbvcxz.com/input-typefile-%E3%82%92%E7%94%BB%E5%83%8F%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AB%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/ 無事実装が完了し、FF、Chromeでは動作したのですが、 IE8～10では画像をクリックしてもファイル選択画面すら動作せず。。 (IE7は確認しておりません) どなたか解決方法をご存じの方がいらっしゃいましたらご教授頂けると幸いに存じます。

  • input type="file"のvalue監視

    input="file"のvalue値が変更されたら別のテキストフィールドに表示するというScriptを書いたのですが動作してくれません。 input="file"ではなく普通のテキストフィールドならば動作します。 fileフィールドでは動作しないのでしょうか。それとも書き方がまずいのでしょうか。 以下、ソースです。 <html> <head> <title>test</title> <script type="text/javascript" src="/javascript/prototype.js"></script> </head> <body> <form action="" enctype="multipart/form-data" method="post"> <input id="file_test" name="file_test" type="file"> <br> <div id="result">表示</div> <script type="text/javascript"><!-- window.onload = function() { new Form.Element.Observer('file_test', 1, function(element, value) { document.getElementById('result').innerHTML = value; }); } //--></script> </form> </body> </html> よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する