• 締切済み

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>

  • HTML
  • 回答数3
  • ありがとう数2

みんなの回答

回答No.3

ファイルフィールドを5個くらいにして、 ホスティングサービスなどで使われているいわゆるファイルマネージャーや、 ブログのファイルアップロード画面(アップロード済みファイル管理画面)みたいな物が現実的じゃないでしょうか。 (これらは通常はクライアントサイドスクリプトやブラウザプラグインなどを使いません) 同時に1000個とか、ディレクトリ(フォルダ)指定で送信というのは、 HTMLやJavaScriptではできません。 (やってやれなくはないですが、ご存じの通り(ご想像の通り?)<input type="file">が1000個並ぶことになります) VBScriptなら、フォルダ指定ダイアログを使ったりとか、ファイル選択ダイアログのカスタマイズができるかもしれませんが、、、 JAVAAppletでもファイルの保存は制限されると思うので、 ファイルを選択->Appletで圧縮してメモリ内にデータを保存、 ファイル名はそのまま表示、 送信時には、メモリ内のデータを送信 という流れで出来るんじゃないでしょうか。 (とはいえ、1000個のファイルを1度で選択するダイアログを表示出来るかどうか、、、) 1000個も送るなら、むしろFTPを使った方がいいと思うのですが、、、 FirefoxのFireFTPとか、メジャーなブラウザも簡単なFTP機能を持っていますから。

shoten
質問者

お礼

ありがとうございます。 当初の疑問であった『ファイルを複数格納できるテキストエリア』については簡単には解決できそうにないので、今回は諦めることに致しました。 なので、この質問を閉めようと思います。 私なりの対処法としては、やはりJavaAppletを埋め込んで、 圧縮対象は .setFileSelectionMode(JFileChooser.DIRECTORIES_ONLY) でフォルダに絞って、そのフォルダの中に1000個入ってたらそれで良し、としようかと… ただ、今回の対象になるファイルが画像ファイルに限定されるかもしれないので、 もし指定されたフォルダの中に画像以外のファイルがあったらどうするのか、などの問題は残るのですが。 (無視するかfilefilterを設定するべきか) 現状、Appletの動作状況が芳しくないので、srcは公開できませんが、 頑張ります。 ご返答くださったお二人に感謝いたします。ありがとうございました。

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

一度におくれるサイズの制限とかもきびしめなので、いずれにしても 1000となると非現実的かもしれませんね。 また1000も欄をつくってしまうと、作業上もかなり問題になりそうですので 何度かにわけてやる必要があると思いますが・・・。

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

必要ファイル数入力→サブミット→必要ファイル数分file領域確保 とすればよいでしょう。 type=fileはセキュリティが特にきびしいので、そんなに調整が ききませんので

shoten
質問者

お礼

早速のご回答、ありがとうございます。 参考にさせていただきます。 ただ、その方法ですと、実際ユーザが1000近いファイルを指定したいとき、正確な数値を要求するのはムリがあると思われます。 現時点で回避方法として、Java Appletで【フォルダ参照】ボタンを作成し、 送信したいファイルを詰め込んだフォルダをユーザに選択させて、 【OK】でフォルダを圧縮して<type=file>のテキストエリアに挿入、 というのは考えております。 その場合でも、ファイル(圧縮されたフォルダ)を格納するテキストエリアは複数表示可能が希望なので、 引き続き、良いご回答をお待ちしたいと存じます。 宜しくお願い致します。

関連するQ&A

  • <input type="file">でテキストボックスを触れなくする方法

    いつもお世話になっております。 表題の件で質問なのですが、HTMLのタグ <input type="file" ....>ではテキストボックスの値を readonlyに設定し、「参照...」ボタンからファイルを 選択するようにする方法はあるのでしょうか。 ご存知の方がいらっしゃいましたらご教授願えれば 幸いに存じます。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • <input type="file">で条件分岐

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

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

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

    • ベストアンサー
    • HTML
  • <input type="file">アップロード

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

    • ベストアンサー
    • HTML
  • [html] <input type="file">タグの参照ボタンを画像ボタンにしたい。

    タイトルのとおりなんですが、<input type="file">をhtmlで記述するとテキストボックスと共に参照ボタンが表示されますよね? あの参照ボタンを画像ボタンにしたいのですが、どうしたらできるのでしょうか?それともそもそも出来ないのでしょうか? 教えてください。お願いします。

    • ベストアンサー
    • 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">のイベントについて

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

  • input type="file"に入力するには?

    わからなかったので質問させてください。 inputtype="text"のときは入力できたのですが以下の方法で入力できたのですがfile場合はできないのでしょうか?。 入力したいのはファイルパスです。 ファイルパスを入力して画像ファイルをアップロードさせてたいのですがどのようにすればいいでしょうか。 どなたかご教授ください。 <input type="file" name="file" size="30"> WebBrowser1.Document.All.GetElementsByName("file")(0).InnerText = TextBox1.Text

  • ファイルの内容が表示できるか?

    外部ファイルでお願いします。 参照ボタンから、何でもいいのでファイルを選びます。ファイル名がテキストボックスに表示されます。 下にあるYESボタンを押すと、その下にコメントアウト してあるテキストボックスが上記のID,ファイル名に追加されテキストボックスの中に参照ボタンから選んだ ファイルが挿入される。また、左のNOボタンを押すと その列が削除されるというやり方は可能でしょうか? <html> <head> <title>画面</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body> <table> <col width="100"> <col width="100"> <tr> <td> <input type="file" name="file"size="50"> </td> </tr> </table> <table border ="1"> <col width="50"> <col width="200"> <tr> <th>ID</th> <th>ファイル名</th> </tr> </table> <input type="button" name="yes" value="YES"value="" > <!-- <table border="1"> <col width="50"> <col width="200"> <tr> <td><input type="button" name="no"value="NO"value="" ></td> <td><input type="text" name="file" size="40" value=""></td> </tr> </table> --> </body> </html>

  • input type="file" 参照内容のクリア

    「input type="file"」にて、参照ボタン押下後に設定される、 ボタン左のテキストボックスの内容をクリアする方法を探しています。 「input type="file"」項目の直接入力を許可していれば可能かと思いますが、 「OnKeyDown = "return false;"」を設定し、直接入力を禁止しております。 可能であれば、このまま項目の直接入力は禁止としておきたいと思います。 以上の内容で、どなたか解決の方法をご存知ないでしょうか? 何卒宜しくお願い致します。 仕様ブラウザ IE6・7

    • ベストアンサー
    • HTML

専門家に質問してみよう