File upload sample1
今更ですが、ファイルのアップロードをちょっと勉強。ここUsing files from web applications | MDNを写経しただけですが、とりあえずメモとしてブログに書いてみました。
コード
- filesample.html
<!DOCTYPE html> <html> <head> <title>file upload sample</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="js/vender/bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet"> </head> <body> <h1>file upload sample</h1> <div class="container"> <div class="row"> <div class="col-md-5"> <h3>1.ファイル情報の取得</h3> <div class="input-group"> <input type="file" multiple="multiple" id="inputFile"> </div> <h3>2.ファイルインプットを表示しない</h3> <div class="input-group"> <input type="file" multiple="multiple" id="fileInput" accept="text/csv" style="display:none;" > <a href="#" id="fileSelect">csvファイルを選択(複数ファイル可能)</a> </div> <h3>3.ドラッグ&ドロップ</h3> <div class="input-group"> <div id="dropbox" class="text-center bg-warning" style="border: darkcyan solid thin;">ここにアップするファイルをドラッグ</div> </div> </div> <div class ="col-md-4"> <h3>アップしたファイル情報</h3> <table class="table-bordered table-striped"> <thead class="bg-primary"> <tr> <th>ファイル名</th> <th>ファイルサイズ</th> <th>ファイルタイプ</th> </tr> </thead> <tbody id="fileInfo"> </tbody> </table> </div> <div class="col-md-3"> <h3>画像サムネイル</h3> <div id="preview"></div> </div> </div> </div> <script src="js/vender/jquery-1.11.3.min.js"></script> <script src="js/vender/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script> <script src="js/filesample.js"></script> </body> </html>
- filesample.js
'use strict'; (function(){ // アップしたファイル情報をテーブルに表示 var displayFileInfo = function(files){ var fileInfo = document.getElementById('fileInfo'); // tbodyをクリア fileInfo.textContent = null; var len = files.length; for (var i=0;i<len;i++){ var file = files[i]; var tbodyEle = '<tr>' + '<td>' + file.name + '</td>' + '<td>' + file.size + '</td>' + '<td>' + file.type + '</td>' + '</tr>'; fileInfo.insertAdjacentHTML('beforeend', tbodyEle); } }; // 画像サムネイルを表示 var createThumbnail = function(files){ var imageType = /^image\//; var preview = document.getElementById('preview'); // imgをクリア preview.textContent = null; var len = files.length; for (var i=0;i<len;i++){ var file = files[i]; if (!imageType.test(file.type)){ continue; } // イメージ作成&読込みして表示 var a = document.createElement('a'); a.classList.add('thumbnail'); preview.appendChild(a); var img = document.createElement('img'); img.classList.add('obj'); img.file = file; a.appendChild(img); var reader = new FileReader(); reader.onload = (function(aImg){ return function(e){aImg.src = e.target.result;}; })(img); reader.readAsDataURL(file); } }; // 1.ファイル情報の取得 var inpueFileEle = document.getElementById('inputFile'); inpueFileEle.addEventListener('change', function(){ displayFileInfo(this.files); createThumbnail(this.files); }); // 2.ファイルインプットを表示しない var fileInEle = document.getElementById('fileInput'); fileInEle.addEventListener('change', function(){ displayFileInfo(this.files); createThumbnail(this.files); }, false); var fileSelEle = document.getElementById('fileSelect'); fileSelEle.addEventListener('click', function(e){ fileInEle.click(); e.preventDefault(); }, false); // 3.ドラッグ&ドロップ var dropbox = document.getElementById('dropbox'); dropbox.addEventListener('dragenter', function(e){ e.stopPropagation(); e.preventDefault(); }, false); dropbox.addEventListener('dragover', function(e){ e.stopPropagation(); e.preventDefault(); }, false); dropbox.addEventListener('drop', function(e){ e.stopPropagation(); e.preventDefault(); var dt = e.dataTransfer; var files = dt.files; displayFileInfo(files); createThumbnail(files); }, false); }());
ドラッグできたり、サムネイルを追加したりするのは知らなかったので、とても勉強になりました。
次は、サーバーにアップするのに挑戦したいと思います。
gistFile upload sample(originally here https://developer.mozilla.org/en/docs/Using_files_from_web_applications) · GitHubにアップしました。