Jquery 拖放输入文件

我有一个带有输入的表单，用于添加要上载的文件。我需要创建一个拖放区域，用户可以在其中拖放文件并按下按钮上载。到目前为止，我已经编写了以下代码：

HTML代码

<form name="form_name" action="#" method="POST" enctype="multipart/form-data">
  <input type="submit" name="button_1"  id="button_1" role="button"/>
  <input type="file" value="" name="file_upload" id="file_upload_id">
    <div class="dropzone2" id="dropzone2" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img src="https://www.mylink.com/img.jpg">
    </div>
</form>

        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("text", ev.target.id);
        }

        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("text");
            ev.target.appendChild(document.getElementById(data));
        }