ドラッグアンドドロップ対応画像アップロード

 

JQUERYを使って、ドラッグアンドドロップのアップロードを実装する方法。

 

HTML

<div class="drop-area">
    <label>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M19.479 10.092c-.212-3.951-3.473-7.092-7.479-7.092-4.005 0-7.267 3.141-7.479 7.092-2.57.463-4.521 2.706-4.521 5.408 0 3.037 2.463 5.5 5.5 5.5h13c3.037 0 5.5-2.463 5.5-5.5 0-2.702-1.951-4.945-4.521-5.408zm-7.479-1.092l4 4h-3v4h-2v-4h-3l4-4z"/>
        </svg>
        <input type="file" name="media" accept="image/jpeg, image/png" class="uploader">
        <div class="preview-area"></div>
    </label>
</div>

 

CSS

.drop-area {
    border: 2px dashed #C8C8C8 !important;
    background-color: #F0F0F0 !important;
    border-radius: 5px;
    padding: 30px;
    text-align: center;
}
.drop-area label {
    width: 100%;
    display: inline-block;
}
.drop-area label:hover {
    cursor: pointer;
}
.drop-area label input {
    display: none;
}
.drop-area label svg {
    width: 50px;
    fill: currentColor;
    color: #909090;
}
.drop-area label .preview-area {
    width: 75%;
    margin: 15px auto;
    height: 200px;
}
.drop-area label .preview-area img {
    height: 100%;
    max-width: 100%;
    width: auto;
}

 

Jquery

$(window).on("load",function(){
  //ドラッグ&ドロップ時の操作
  $(document).on('drop', '.drop-area' ,function (event) {
    $(this).find('.uploader')[0].files=event.originalEvent.dataTransfer.files
    $(this).find('.uploader').trigger('change')
  })

  //ドロップエリア以外のドロップ禁止
  $(document).on('dragenter dragover drop', function (event) {
    event.stopPropagation()
    event.preventDefault()
  })

  //ファイルがアップロードされたらプレビューエリアに表示
  $(document).on('change','.drop-area .uploader',function(e) {
    let thiss = $(this)
    let fileReader = new FileReader()
    fileReader.onload = (function () {
      let imgTag = `<img src='${fileReader.result}'>`
      thiss.closest(".drop-area").find(".preview-area").html(imgTag)
    })
    fileReader.readAsDataURL(e.target.files[0])
  })
})