使div Droppable用于文件上传

Question

我已经创建了一个div来显示基于我将要进一步执行的过程生成的输入图像和输出图像。

我只需使用“提交”按钮就可以上传文件，并且可以获得所需的结果。 现在，根据需要，我希望输入图像 div可放置，这意味着用户可以轻松地将图像放置到框中，然后提交按钮以进行进一步处理。我不知道该怎么做。

这是我的HTML代码：

<div class="container">
  <div class="row">

    <div class="col-md-6 col-sm-12">
      <h2 class="inputImage-text text-center">Input Image</h2>

 <form id="uploadForm" action="upload.php" method="post" enctype="multipart/form-data">
       <div id="targetLayer" class="dropzone dz-clickable dz-default dz-message">No Image</div>
       <div id="uploadFormLayer">
       <input name="fileToUpload" type="file" class="inputFile" /><br/>
       <input type="submit" value="Submit" class="btn btn-primary" />
       </div>
       </form>
   </div>
    <div class="col-md-6 col-sm-12">
       <h2 class="outputImage-text text-center">Output Image</h2>
      <div class="outputDiv">
     </div>
 </div>
  </div>
</div>

这是我的项目。 如您所见，我只希望输入图像框可放置。 和其余过程应该相同。

如果您有任何建议。请帮忙。