ベストアンサー

inputボックスでのファイル選択後、自動でinputボックス作成

2009/08/13 10:15

<input type="file">でアップロードファイルを選択後、自動で新しい<input type="file">のボックスが表示されるような仕組みを作れますか？ onclick（）のようなイベント取得方法で、ファイルが選択されたというようなイベントなどがありますでしょうか？ファイルを連続で選択し、それらをまとめてアップロードする必要があります。

sublate
お礼率26% (12/46)

JavaScript
回答数3
ありがとう数1

みんなの回答 （3）
専門家の回答

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

ベストアンサー

yambejp
ベストアンサー率51% (3827/7415)

2009/08/13 16:01 回答No.1

追加するより、隠しておいて見せるほうがなにかと楽ですね <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> ファイルを連続して選択するのは、セキュリティ的にムリだと思います

質問者

補足 2009/08/16 05:16

onchange試してみます。 <input type="file"の数は限定できないと思います。動的に追加することはできないでしょうか？

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

yuu_x
ベストアンサー率52% (106/202)

2009/08/16 14:07 回答No.3

<!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)

2009/08/13 19:29 回答No.2

>ファイルを連続して選択するのは、セキュリティ的にムリだと思いますそんな話は初耳ですが、参照元を教えていただけないでしょうか。一応 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 でまわしたがるんだろとか、時間ができたらサンプル書くのでちょっと待ったってください。

ログインすると、全ての回答が全文表示されます。