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

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

ただいまの
回答率

88.92%

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

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,505

SteveLight

score 12

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);
              }
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yuki84web

    2017/05/26 07:48

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

    キャンセル

  • SteveLight

    2017/05/26 08:04

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

    キャンセル

回答 2

0

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

-1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • トップ
  • JavaScriptに関する質問
  • サンプル画像のクリックでファイル選択から画像選択で左側に選択画像を、右側にファイル選択のためのサンプル画像を配置したい!!