2015/10/20
File Apiを使ってアップロードした画像を表示させる
HTML5から登場したFile Apiを利用すると、画像をinput[type=file]でアップロードしたものをすぐサイトに反映させることができます。
そもそもの話になってしまう、かつ、だいぶ前の話ですが、HTML5から新しいAPIが追加されました。
localstorage、Geolocation API、canvas、svg、等々です。
詳しくは、下記リンクをご覧ください。
HTML5のAPI、および、関連仕様
今回ご紹介するFile Apiを使うと、ローカル環境に保存されているファイルを扱えるようになるそうです。
DEMOを作りましたのでご覧下さい。
DEMOはちょっとfileのボタンをオリジナルにしているのと、
ドラッグ＆ドロップでアップロード出来るようになっております。
これもHTML5からできたAPIになります。
jQueryで実装しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | $(".fileupImg").on("click", function(event){ $("input[name=img]").trigger("click"); }); $('input[name=img]').change(function(){ if (!this.files.length) { return; } var file = this.files[0]; upload(file); }); //ドラッグ＆ドロップの実装 $('.dragArea').on('drop', function(e){ e.preventDefault(); $('.dragArea').removeClass('over'); // ファイル情報を取得 var files = e.originalEvent.dataTransfer.files; upload(files[0]); }).on('dragenter', function(){ $('.dragArea').addClass('over'); return false; }).on('dragover', function(){ $('.dragArea').addClass('over'); return false; }).on('dragleave', function(){ $('.dragArea').removeClass('over'); return false; }); //HTMLに表示 function upload(file){ var fileInfo = "ファイル名： " + file.name + "<br>ファイルサイズ： " + file.size + "<br>最終更新日時：" + file.lastModifiedDate; $(".fileInfo").html(fileInfo); var $img = $(".thumb"), fileReader = new FileReader(); fileReader.onload = function(event) { $img.attr('src', event.target.result); }; fileReader.readAsDataURL(file); } |
上手く構造説明することは出来ませんが、
アップロードボタンを押す → input[type=file]が動作 → 画像をアップ(変更) →
サイトに、画像の情報を表示。
という流れです。
今まで難しかったことが、html、javasciptで簡単にできるようになって来てますね！
今度は、ドラッグ＆ドロップやform周りのことを書いてみたいと思います！
参考ブログ
Author Profile
スターフィールド編集部
SHARE
