Javascript 拖放时的图像预览不显示

我有一个带有图像预览div的拖放脚本。当我将图像拖放到标签或div上时，它会工作，但不会显示图像。它显示了一个断开的图像链接。如果我在

console.log中检查它，它会显示
GEThttp://localhost/site/null 404（未找到）
。
我需要将图像放入
.media\u drop
div中进行预览

代码如下：

<div class="media_drop" onchange="preview_image(event)" onclick="imageViewer()">
  <label for="file" id="label_input"></label>
    <input class="media_file" type="file" id="file"  name="" accept="image/*">
</div><!-- End of media_drop --> 

我将感谢任何帮助。
TIA
你能创建一个小提琴吗？@huraji这里有一个我读过的代码笔
$未在控制台中定义
，我将添加到JSFIDLE。在codepenI中似乎不起作用，我在codepen中包含了jQuery，它工作得很好。确保jQuery在js代码之前位于顶部。
$(function(){
var reader = new FileReader();

var media_drop = $('.media_drop');
var label_input = $('label_input');
var image_file = document.querySelector('input[type=file]').files[0];

      media_drop.on('dragover', function(e){
      e.stopPropagation();
      e.preventDefault();
      $(this).css('background', 'slategrey');
      $(this).css('border', 'red 2px solid'); 
      });

      media_drop.on('drop', function(e){
      e.stopPropagation();
      e.preventDefault();

      var file = e.originalEvent.dataTransfer.files[0];

      var output = document.querySelector('.image_preview');
      output.src = reader.result;
      //console.log(images);
      reader.readAsDataURL(file);
    $('.image_preview').css('display', 'block');
    $('.media_drop').css('display', 'none');   
    $('label_input').css('display', 'none');

      }); 
});