jQueryが使えない場面があるかもしれない・・!

以前、下記のような記事を書きました。

 

fileのアップロード時にプレビューする機能を実装した

 

複数のアップロードのプレビューも想定して以下の記事も書きました。

 

複数のinput=fileに画像プレビューする機能を設置する

 

 

導入

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を使う時には重宝してたりします。

今日はこの辺で

6件のコメント

    1. できますよー

      <input type="file" onChange="imgPreView(event, 'item1')">
      <div id="preview-item1"></div>
      
      <input type="file" onChange="imgPreView(event, 'item2')">
      <div id="preview-item2"></div>
      
      <input type="file" onChange="imgPreView(event, 'item3')">
      <div id="preview-item3"></div>
      
      function imgPreView(event, id){
        var file = event.target.files[0];
        var reader = new FileReader();
        var preview = document.getElementById("preview-"+ id);
        var previewImage = document.getElementById("previewImage-"+ id);
        
        if(previewImage != null)
          preview.removeChild(previewImage);
      
        reader.onload = function(event) {
           var img = document.createElement("img");
           img.setAttribute("src", reader.result);
           img.setAttribute("id", "previewImage-" + id);
           preview.appendChild(img);
          
        };
      
        reader.readAsDataURL(file);
      }
      
      
      管理人

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください