画像をドラッグ＆ドロップで登録してプレビュー表示

備忘録

input:fileの画像登録時にドラッグ＆ドッロップでinputに値を渡し、プレビューを出す記述。
（通常登録も対応）

JSライブラリ依存せずに使用（してるはず）。

CODEPEN

See the Pen 画像をドラッグ＆ドロップで登録してプレビュー表示 by manabu tanaka (@tonkatsu) on CodePen.

記述

html　ドラッグ＆ドロップするエリア

<form method="post" enctype="multipart/form-data">
    <div id="dragDropArea">
        <div class="drag-drop-inside">
            <p class="drag-drop-info">ここにファイルをドロップ</p>
            <p>または</p>
            <p class="drag-drop-buttons">
                <input id="fileInput" type="file" accept="image/*" value="ファイルを選択" name="photo" onChange="photoPreview(event)">
            </p>
            <div id="previewArea"></div>
        </div>
    </div>
    <button type="submit" name="submit" value="登録">登録<button>
</form>

css　簡単に整形

#dragDropArea{
  background-color: #f4f4f4;
  margin: 10px;
  padding: 10px;
  border: #ddd dashed 5px;
  min-height: 200px;
  text-align: center;
}
#dragDropArea p{
    color: #999;
    font-weight: bold;
    font-size: 14px;
    font-size: 1.4em;
}
#dragDropArea .drag-drop-buttons{
    margin-top: 20px;
    font-size: 12px;
    font-size: 1.2em;
}
.drag-drop-buttons input{
    margin: auto;
}

JS　ドラドロイベントでごにょごにょ＆選択時にごにょごにょ

var fileArea = document.getElementById('dragDropArea');
var fileInput = document.getElementById('fileInput');
fileArea.addEventListener('dragover', function(evt){
  evt.preventDefault();
  fileArea.classList.add('dragover');
});
fileArea.addEventListener('dragleave', function(evt){
    evt.preventDefault();
    fileArea.classList.remove('dragover');
});
fileArea.addEventListener('drop', function(evt){
    evt.preventDefault();
    fileArea.classList.remove('dragenter');
    var files = evt.dataTransfer.files;
    console.log("DRAG & DROP");
    console.table(files);
    fileInput.files = files;
    photoPreview('onChenge',files[0]);
});
function photoPreview(event, f = null) {
  var file = f;
  if(file === null){
      file = event.target.files[0];
  }
  var reader = new FileReader();
  var preview = document.getElementById("previewArea");
  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);
}

参考サイト

https://www.kabanoki.net/1552/
http://koheik.hatenablog.com/entry/2016/07/08/152936
https://qiita.com/sanapon1020/items/77d37fe1fd6f87740e1b