【javascript】JavaScriptでFileReaderを使った画像プレビュー
inputで画像選択した後、
その画像をプレビューとして表示する方法についてまとめていきたいと思います。
FileReader を使ってプレビュー表示する
下記がプレビューを表示するコード
<input type="file" accept='image/*' multiple="multiple" onchange="preview(this);">
<div id="preview"></div>
<script>
function preview(obj){
for (i = 0; i < obj.files.length; i++) {
var fileReader = new FileReader();
fileReader.onload = (function (e) {
document.getElementById('preview').innerHTML += '<img src="' + e.target.result + '">';
});
fileReader.readAsDataURL(obj.files[i]);
}
}
</script>
multiple 属性
以下のようにmultiple="multiple"と記述すると
ファイル選択時に複数選択することが可能です。
<input type="file" name="image_file[]" multiple="multiple">
See the Pen input 複数ファイル選択 by たまき こう (@ulqvhvox) on CodePen.
File API と FileReader API なるものを利用しているらしいがすごく長くなりそうなのでまた明日。。
参考
