- ベストアンサー
inputボックスでのファイル選択後、自動でinputボックス作成
<input type="file">でアップロードファイルを選択後、自動で新しい<input type="file">のボックスが表示されるような仕組みを作れますか？ onclick（）のようなイベント取得方法で、ファイルが選択されたというようなイベントなどがありますでしょうか？ ファイルを連続で選択し、それらをまとめてアップロードする必要があります。
- sublate
- お礼率26% (12/46)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
追加するより、隠しておいて見せるほうがなにかと楽ですね <script> function view(obj){ var f=obj.form; for(var i=0;i<f.length;i++){ if(f[i]==obj){ for(var j=i+1;j<f.length;j++){ if(f[j].type=="file"){ f[j].style.display=""; break; } } break; } } } </script> <form> <input type="file" onchange="view(this)"> <input type="file" onchange="view(this)" style="display:none"> <input type="file" onchange="view(this)" style="display:none"> <input type="file" onchange="view(this)" style="display:none"> </form> ファイルを連続して選択するのは、セキュリティ的にムリだと思います
その他の回答 (2)
- yuu_x
- ベストアンサー率52% (106/202)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <title></title> <script type="text/javascript"> //@cc_on var XXX = 'xxxFile'; function changeHandler( evt ) { if( RegExp( XXX ).test( this.name ) ) { increasedXXX( this ); } } function increasedXXX( e ) { var c = e.cloneNode( false ); c.value = ''; e./*@if(1) setAttribute( 'onchange', '' ) @else@*/ removeAttribute( 'onchange' ) /*@end@*/; e.parentNode.appendChild( document.createElement( 'BR' ) ); e.parentNode.appendChild( c ); } </script> </head> <body> <form action="receiver.php" enctype="multipart/form-data" method="post"> <p><input type="file" name="xxxFile[]" value="" onchange="changeHandler.call( this, event );"></p> <p><input type="submit" value="送信"></p> </from> </body> </html> # 全角でインデントが入れてあるので、半角に変換してください。 # XXX は適当な文字に変換してください。 # 複数ファイルの受け取り方は以前示した参照先にあります。
- yuu_x
- ベストアンサー率52% (106/202)
>ファイルを連続して選択するのは、セキュリティ的にムリだと思います そんな話は初耳ですが、参照元を教えていただけないでしょうか。 一応 PHPの話ですが、 cf. http://jp.php.net/manual/ja/feature-fileupload.multiple.php あらかじめ用意しておくと処理の上でも楽だし、スクリプト切っても複数選択できるので、良い案だとはおもいますが、display : none を指定してしまっているので、その利点が台無しになってしまっています。 いい加減、elements 使えよと、 <input type="text" name="length" onchange="alert( this.form['length'] );"> ? <input type="text" name="action" onchange="alert( this.form['action'] );"> ? それから、 ele.style.display=""; は、CSS で display : ; と値無しでと指定してるのと同じなので、構文的に間違っています。どうにもならないときは仕方ないですが、メジャーなブラウザ（IE以外）では、removeProperty があるので、プロパティを消したいときは普通はそれを使います。 name なしで、どうやって受け取るんだろ、とか、（これが厄介だったりする）なんで、for でまわしたがるんだろとか、 時間ができたらサンプル書くのでちょっと待ったってください。
関連するQ&A
- ファイルの選択で画像選択時のイベント
お世話になります よろしくお願いします。 htmlの<input type="file" name="pic">でファイルの選択で画像を選択して 開くをクリックしたときいjaavascriptでイベントを取得したいのですが どうすればいいでしょうか？ ファイルの選択で開くをクリックすると 画像をサーバーにアップしてその画面に表示 という動作をしたいです。 参考になるサイトなどありましたらよろしくお願いします。
- ベストアンサー
- JavaScript
- ファイル選択ダイアログ
今、WindowsMediaPlayerコントロールを埋め込み、 ファイル選択ボタンで選択したファイルを再生ボタンで再生したいです。 <INPUT TYPE="file" NAME="SelectFile" VALUE="ファイル選択" > でファイル選択ダイアログが開くのですが、 選択したファイルを再生ボタンで再生するにはどのようにしたらいいのでしょうか？ 下記のHTML（OBJECT省略）で、決めうちの"sample.wmv"ファイルは再生が確認できています。 ---------------------------------------------------------------- <INPUT TYPE="file" NAME="ButtonSelectFile" VALUE="ファイル選択" > <INPUT TYPE="button" NAME="ButtonPlay" VALUE="再生" OnClick = "StartMeUp()"> <INPUT TYPE="button" NAME="ButtonStop" VALUE="停止" OnClick = "ShutMeDown()"> <SCRIPT LANGUAGE="JavaScript"> function StartMeUp() { Player.URL = "sample.wmv"; } function ShutMeDown() { Player.controls.stop(); } ---------------------------------------------------------------- まとめますと、 「ファイル選択ボタンで選択したファイルを再生ボタンで再生したい。」 です。 どうぞよろしくお願い致します。
- ベストアンサー
- HTML
- ファイルアップロードのダイアログボックスで拡張子を固定するには
PHP4で画像ファイルをアップロードするスクリプトを組んでいたのですが、<input type="file">のボタンをクリックしたときに表示されるダイアログボックスにおいて、拡張子を決めておいて画像ファイルのみを選択するようにはできないんでしたっけ？？ 現在は、「すべてのファイル（*.*）」がデフォルトで、 画像（*.gif;*.jpg;*.jpeg;*.png） HTML (*.htm;*.html) が選択できるようになっています。 これを、 画像（*.gif;*.jpg;*.jpeg;*.png） だけ表示させたいと考えています。 よろしくお願いします。
- ベストアンサー
- PHP
- safari ファイルを選択 取り消したい
safariを使ってローカルのファイルをサーバへアップロードする時の作業について質問です。 <input type="file" ... > のフォームでサーバに送信しているのですが、選択したファイルをすぐに取り消したい場合、 ＩＥでしたらテキストボックスに入力されたファイルのパスを「Delete」で消せばいいわけですが、 safariだとすぐに消すことができません。 「ファイルの選択」ボタンの横にJavascriptなどで「選択の削除」ボタンを作るなどという方法が正しいのでしょうか？ どなたかご教授の程よろしくお願いします。
- ベストアンサー
- その他(業務ソフトウェア)
- [IE5.5]INPUT TYPE=FILEのREADONLYについて
先週まで、IE5.0でHTMLを書いておりました。 今週なんとなくIE5.5 SP2にバージョンアップしました。 そしたら、以下の部分が動作しなくなってしまいました。 ----------------------------------- <INPUT TYPE="FILE" READONLY="true"> ----------------------------------- 前任者が作成したソースですので、記述に誤りがあるかもしれませんが、 IE4.0、IE5.0では何も問題なく動作しております。 しかしIE5.5だと、ファイル参照のボタンは表示されているのですが、 クリックしても何の反応もありません。 ちなみにREADONLY属性を取り除くと、ファイル選択ダイアログが表示されました。 しかし、ファイルを選択した後サーバへアップロードしており、 アップロードされたファイル名をデータベースに書き込む処理がありますので、 万が一、アップロード後にファイル名が書き換えられてしまうと、 サーバとデータベースとの整合が取れなくなってしまう為、 どうしても編集不可にしたいのです。 どなたかご存知の方が見えましたらご教授願います。 IE5.5では、<INPUT TYPE="FILE">にREADONLY属性は使えないのでしょうか？ また、別の方法での対処方法などはないでしょうか？
- 締切済み
- HTML
- <input type="file">アップロード
下記教えて下さい <input type="file" name="datafile"> <input type="submit" value="送信する"> 上記を使ってファイルのアップロード機能を作りたいのですが、 (1)ファイル選択していない状態で「選択されていません」となるので 文字を消したい（文字を非表示、または違う文言にしたい）場合、どこで設定するのでしょうか。 (2)送信するボタンを置かずに、選択時にそのまま送信処理につなげたいのですが どのようにすれば良いでしょうか。
- ベストアンサー
- HTML
- <input type="file">のイベントについて
<input type="file">でファイルを選択した時点にイベントを追加する方法を教えてもらえませんか？ セキュリティの観点から無理なのでしょうか？
- ベストアンサー
- JavaScript
- ラジオボタンの選択に応じてインプットを表示する。
お世話になります。 現在、ラジオボタンの選択に応じてインプットのフィールドが表示されるようなHTMLフォームを作っているのですが、煮詰まってしまいました。どうしてもうまくいかないのですが、 <html> <head> <title>テスト</title> <script type="text/javascript"> <!-- function checkradio( disp ) { document.getElementById('input').style.display = disp; } //--> </script> </head> <body> <form action="xxx"> <p> <input type="radio" name="domain" id="1" value="1" onclick="checkradio('none');" /> <label for="1">選択１</label><br /> <input type="radio" name="domain" id="2" value="2" onclick="checkradio('none');" /> <label for="2">選択２</label><br /> <input type="radio" name="domain" id="3" value="3" onclick="checkradio('block');" checked /> <label for="3">選択３</label><br /> </p> <p id="input"> 選択３の詳細を書いてください。：<input type="text" id="input" name="select3" value="" size="20" /> </p> </form> </body> </html> と、こんな感じで、３を選択した時しかインプットを表示できません。選択１や選択２を表示した時には、「選択１の詳細を書いてください。」または「選択２の詳細を書いてください。」と表示させたいのですが、どこをどんな風に直せばいいでしょうか？ それと同時に初期画面ではこのインプットを非表示にしてラジオボタンを選択した時に表示されるようにしたいと思っています。 よろしくお願いします。
- ベストアンサー
- JavaScript
- input file DOMで操作
<input type="file" class="decInpt" name="ImageFile1" onChange="activeNext(document.imgup.ImageFile1);" size="82" > こういうクリックするとファイルをアップロードするダイアログが現れるやつで DOMでダイアログを表示させて目的の場所のファイルを選択して閉じる。ということをやりたいのですが可能でしょうか？ document.getElementsName("ImageFile1")[0].value="D:\Dropbox\写真\dat1274628644488.jpg" こんな感じをイメージしていたのですが・・・ どうか回答お願いします。
- ベストアンサー
- JavaScript
- <input type="file">タグで「キャンセル」か「開く」を取得したい
いつもお世話になります。 <input type="file">タグで、 ファイル選択ダイアログを開いたあとに、 「キャンセル」を押したのか、 ファイルを選択したのか（「開く」を押したのか）を 取得する方法はないのでしょうか？ よろしくお願いします。
- 締切済み
- HTML
補足
onchange試してみます。 <input type="file"の数は限定できないと思います。 動的に追加することはできないでしょうか？