<input type="file"> で入力された画像をサムネイル表示する(Pure JS)
5074 ワード
概要
画像のアップロードをする前にユーザが選択した画像をサムネイル表示する機能をライブラリを使わずに実装します。
実装
index.html
<input type="file" onchange="onChangeFileInput(this)">
<div>
<img id="thumbnail" accept="image/*" src="/img/icon_add.png">
</div>
script.js
const onChangeInputFile = (e) => {
if (e.target.files && e.target.files[0]) {
const reader = new FileReader();
reader.onload = function(e) {
document.getElementById('thumbnail').setAttribute('src', e.target.result);
};
reader.readAsDataURL(e.target.files[0]);
}
};
style.css
#thumbnail {
height: 100px;
max-width: 100px;
margin: 10px;
border: solid thin lightgray;
border-radius: 5px;
}
index.html
<input type="file" onchange="onChangeFileInput(this)">
<div>
<img id="thumbnail" accept="image/*" src="/img/icon_add.png">
</div>
script.js
const onChangeInputFile = (e) => {
if (e.target.files && e.target.files[0]) {
const reader = new FileReader();
reader.onload = function(e) {
document.getElementById('thumbnail').setAttribute('src', e.target.result);
};
reader.readAsDataURL(e.target.files[0]);
}
};
style.css
#thumbnail {
height: 100px;
max-width: 100px;
margin: 10px;
border: solid thin lightgray;
border-radius: 5px;
}
ファイルが選択されていない状態だと不自然なぺしゃんこ四角形ができるので、100×100 の画像(icon_add.png)をセットしています。
利用例
※ イラストの出典: 手巻き寿司のイラスト(いらすとや)
参考
Author And Source
この問題について(<input type="file"> で入力された画像をサムネイル表示する(Pure JS)), 我々は、より多くの情報をここで見つけました https://qiita.com/noobar/items/afe7fc9994b448672c88著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .