以前投稿したやつの改訂版
https://qiita.com/ketabawo/items/1f40283e2d64c283d13b
上記コードは同一ページ内に複数のアップローダーがあると動かないという欠陥があり、業務中にその欠陥に遭遇したので改良したものを投稿しておきます。

rails simple_formを使ってます。

.imageUploader{onclick: "buttonClick('HUGAHUGA')"}
  .imageUploader__preview
    - if f.object.HOGEHOGE.present?
      = image_tag "#{f.object.HOGEHOGE.retina}"
      %p.change 画像を変更する
    - else
      %p.upload 画像を選ぶ
= f.input :HOGEHOGE, label: false, input_html: {onchange: 'imageUploader(event)'}

function buttonClick(targetNode){
  document.getElementById(targetNode).click();
};
function imageUploader(e){
  var imageFile = e.target.files[0];
  var reader = new FileReader();
  var imageScreen = e.target.parentNode.previousElementSibling.querySelector('.imageUploader__preview');
  var imageTag = e.target.parentNode.previousElementSibling.querySelector('.imageUploader__preview img');
  if(imageTag != null){
    imageScreen.removeChild(imageTag);
  }
  reader.onload = function(){
    var img = document.createElement('img');
    img.setAttribute('src', reader.result);
    imageScreen.appendChild(img);
  };
  reader.readAsDataURL(imageFile);
};

画像タグをどこに出力させるかのアクセス先がおかしかったので、それぞれのinput type='file'の位置から辿って正しい場所を指定。
ご利用の際はHTML構成が異なるはずなので適宜変更してください。

var imageScreen = e.target.parentNode.previousElementSibling.querySelector('.imageUploader__preview');
var imageTag = e.target.parentNode.previousElementSibling.querySelector('.imageUploader__preview img');

これでテストした限りだと正常に動作しているのでOKかとは思いますが、なにせ僕が書いたコードなのでアテになりませんｗｗｗ