質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

2965閲覧

input type = "file" で画像をクリックして選択画面を出したい。

sususu

総合スコア99

JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1グッド

1クリップ

投稿2018/03/25 12:32

編集2018/03/26 12:22

連投失礼します。
下記2点質問がございますのでご教授いただければ幸いです。
よろしくお願いいたします。

①input type "file"で画像ファイルを選ぶときに、もともとある画像をクリックして選択画面に遷移したいです。
イメージ説明
イメージとしては、既存の寿司の画像を変更したくなったので既存の画像をクリックしてフォルダを開き、新しい画像を選択したらその選択した新しい画像に差し替えるといった具合です。
画像を引っ張ってくる方法はEL式でパスを持ってくるといった具合にしようと思っております。
下記のようなことを試したりしてみましたが出来なかったので今はidを使う方法を模索中です。

style = display:img src = "${pb.path}" height = "64"/></td>

②コードでaccept="image/*"と入れて画像だけを選択可能にしようとしても下記のように結局『すべてのファイル』を選べて画像以外が選択できるようになってしまいます。これを防ぐ方法はありますでしょうか?
イメージ説明

以上2点よろしくお願いいたします。

開発環境
OS windows10
エディション enterprise
言語 java8.0.1310.11
MariaDB10.1
HeidiSQL
eclipse NEON

A-pZ👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/03/25 12:46

サーバーのファイルを使いたいの?ローカルのファイルを使いたいの?
sususu

2018/03/25 12:56

すいません。正直サーバとローカルの違いが良く分かっていません。画像アップロードの機能を作ったのですがその画像の保存先は次のパスになります。これはサーバになるのでしょうか?properPathはC:\pleiades\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\shopping\picture/質問で返してしまってすいません!!
退会済みユーザー

退会済みユーザー

2018/03/25 13:02

サーバー→アップロード済みのもの
退会済みユーザー

退会済みユーザー

2018/03/25 13:12 編集

ローカル→アップロードしてから
sususu

2018/03/25 13:04

ありがとうございます。それならアップロード済みのものになります。
defghi1977

2018/03/25 13:57

二つの質問はさほど関係がないので分けたほうが良いでしょう
sususu

2018/03/25 22:34

すいません!確かにご指摘の通り関係ないのでこれから質問する時は分けようと思います!
guest

回答2

0

①についてのみですが、おおよそ「[ファイルを選択]ボタンを画像にする」と同じ要件と見受けられます。
input file 画像 などで検索すると結構出てきます。
例えば

ファイルアップロードボタンの装飾](https://www.marukin-ad.co.jp/marulog/?p=1362)

基本はlabelへの装飾なので、javascriptもあわせれば好きなようにできると思います。

投稿2018/03/26 01:33

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sususu

2018/03/26 09:49

ありがとうございます!リンク拝見させていただきます!出来たらこちらで報告させていただきます! ジャバスクリプトに興味はあるのですが、まだ手を付けていないので今のところはjavaとCSSのみでやってみたいと思っております!貴重なご意見ありがとうございます!
m.ts10806

2018/03/26 13:33

細かいですが、javascriptとjavaでは大きく違うので(メロンとメロンパンくらいという良い例えがあります)気を付けてください。
m.ts10806

2018/03/26 13:34

javaはサーバー側の言語でjavascriptはクライアント側の言語なので全く役割が違います。 今回のことを実現するにはjavascriptはほぼ必須です。クリックイベントくらいだとは思いますが。
sususu

2018/03/27 11:14

自動変換でavascriptのタグを選んでしまっていました。申し訳ありません! 今回の件がジャバスクリプトでないと実現が不可能と知らなかったのでとても助かりました! ありがとうございます!
guest

0

ベストアンサー

こんな感じでどうでしょう?

javascript

1window.addEventListener('DOMContentLoaded', function(e){ 2 document.querySelector('#f1').addEventListener('change',function(e){ 3 var t=e.target; 4 if(!t.value.match(/.jpg/i)){ 5 t.value=''; 6 } 7 }); 8});

jpegファイル以外を選ぶとクリアされる

HTML

1<form enctype="multipart/form-data" metho="post"> 2<label for="f1"><img src="xxx.jpg"></label> 3<input type="file" id="f1" accept="image/*" sytle="display:none"> 4<input type="submit" value="go"> 5</form>

投稿2018/03/26 03:46

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sususu

2018/03/26 09:52

コードまでありがとうございます!しかしジャバスクリプトには手を出していないので可能でしたらjavaとCSSで作成してみたいと思っています。もう少し調べてみますが難しそうでしたら、ジャバスクリプトを学んで回答いただいたコードを使わせていただこうと思います!ありがとうございました!
退会済みユーザー

退会済みユーザー

2018/03/27 11:32

accept=image/jpegとかできたような(チェックいらず)
sususu

2018/03/29 15:50

返信ありがとうございます。試してみたのですが『すべて』が選べるようでした。
sususu

2018/03/29 16:27

今回のような2件の問題はjavascriptを使わないと厳しいとのことなのでjavascriptを学んでみたいと思います。 ベストアンサーはソースを載せてくださったyambejpさんにさせていただきます。 皆さん色々ありがとうございました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問