目次
jQueryが使えない場面があるかもしれない・・!
以前、下記のような記事を書きました。
複数のアップロードのプレビューも想定して以下の記事も書きました。
導入
input=fileのプレビュー機能の記事にアクセスが増えてきたので、使う場面があるのかわかりませんが、javascriptのみでプレビュー機能を実装してみます。
HTML
<input type="file" onChange="imgPreView(event)"> <div id="preview"></div>
Javascript
function imgPreView(event) { var file = event.target.files[0]; var reader = new FileReader(); var preview = document.getElementById("preview"); var previewImage = document.getElementById("previewImage"); if(previewImage != null) { preview.removeChild(previewImage); } reader.onload = function(event) { var img = document.createElement("img"); img.setAttribute("src", reader.result); img.setAttribute("id", "previewImage"); preview.appendChild(img); }; reader.readAsDataURL(file); }
See the Pen Mvpbzy by カバの樹 (@kabanoki) on CodePen.0
使う場面あるのか、とか書きながら、vue.jsとかelectronを使う時には重宝してたりします。
今日はこの辺で