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); } });