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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

2回答

2714閲覧

サンプル画像のクリックでファイル選択から画像選択で左側に選択画像を、右側にファイル選択のためのサンプル画像を配置したい!!

SteveLight

総合スコア12

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2017/05/25 14:10

編集2022/01/12 10:55

img要素にサンプルとなる正方形の画像を用意させておいて、クリックすることでファイルにアクセスすることができます。
しかし現状<div id="thumb"></div>に選択画像が注入されるようになってしまうので、サンプル画像の下に選択画像が表示されます。

これを中央にあるサンプル画像の選択で画像を選択したら、横並びの等間隔で左に選択画像、右には最初のサンプル画像と同じデザインでより小さい(=選択済みの画像と同じサイズの大きさ)ファイル選択可能な画像を設置したいと考えています。

また2枚目の選択では、右のサンプル画像の所にそのまま選択画像を置き換える構造にしたいのですが、自分では意図した表示になりません。

また下記のファイル名、ファイルサイズは選択済みの画像の真下に配置したいです。

複雑で難しいと思うかもしれませんが解決方法をご教授ください。

reader.onload = function() {

insert = '<img src="' + reader.result + '"><br>'; insert += 'filename: ' + fileData.name + '<br >'; insert += 'filesize: ' + fileData.size; thumb.innerHTML = insert; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="select.css"> <script src="https://code.getmdl.io/1.3.0/material.min.js"></script> <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script> <script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script> </head> <body> <div class="request"> <p>ファイルを添付してください</p> <label for="file_photo"> <input type="file" name="select" id="file_photo" style="display:none;"> <img src="sample.png" id='sd' width=60% height=60%> <div id="thumb"></div> </label> </div> </body>
$(function(){ if(window.File) { var thumb = document.getElementById('thumb'); var select = document.getElementById('file_photo'); // ファイルが選択されたとき select.addEventListener('change', function(e) { // 選択されたファイルの情報を取得 var fileData = e.target.files[0]; var imgType = fileData.type; // 選択されたファイルが画像かどうか確認 if(!imgType.match(/^image/)) { alert('画像を選択してください'); select.value = ''; return; } var reader = new FileReader(); // ファイル読み取りに失敗したとき reader.onerror = function() { alert('ファイル読み取りに失敗しました') thumb.innerHTML = ''; } // ファイル読み取りに成功したとき reader.onload = function() { insert = '<img src="' + reader.result + '"><br>'; insert += 'filename: ' + fileData.name + '<br >'; insert += 'filesize: ' + fileData.size; thumb.innerHTML = insert; } // ファイル読み取りを実行 reader.readAsDataURL(fileData); }, false); } });

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

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

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

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

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

yuki84web

2017/05/25 22:48

「意図した表示になりません。 」というのが、具体的に現在どうなっているのかを書かれた方が良いと思います。
SteveLight

2017/05/25 23:04

yuki84webさん、ご指摘ありがとうございます。ファイル選択で選択してもプレヴューとして表示されない状態であったりですが、上記のコードではサンプル画像の下に表示されます。
guest

回答2

0

サムネイルをクリックし、ファイルを開き、画像の選択でサムネイルより縮小された、選択画像を元々あったサムネイルの左側に表示。

1枚目の選択により縮小されたサムネイルを右側に表示して、クリックをすれば2枚目の画像を選択可能に。

選択された場合は縮小サムネイルと同じ大きさの選択画像を右側に。
最終的に未選択時のサムネイルより小さい選択画像を2つ横並びにしたいと考えてます。

なにかヒントを下さればと思います。
よろしくお願い致します。

投稿2017/10/07 14:31

SteveLight

総合スコア12

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

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

0

「真下」「右」とかはスクリーンショットがなければわかりません。
ひとまず HTML/CSSで組み方を考えた上で、その構成になるように JavaScriptで組まれてはいかがでしょうか。

投稿2017/05/26 16:33

kei344

総合スコア69364

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問