表格内的图像拖放上传？

Question

我正在尝试创建/制作我的第一个拖放/选择图像上传。

我有一个网站的后端，我想在其中添加“汽车”并查看下面的表格。我想弄清楚，我是否需要处理表单之外的图像，或者最好的解决方法是什么？

理想情况下，我希望允许用户在拖放框中的“支持文本”区域之后拖动/选择图像。

Upload Page is Here

我想我在问什么，因为我相信这通常由 jquery 处理，处理它的最佳方法是什么。理想情况下，当我点击创建按钮时，我想将其全部发送到另一个 php 页面以提交到数据库和图像存储的路径，但我知道在移动到下一页之前我需要“上传图像” ?

Answer 1

请参阅此示例。它可能会帮助你。

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));
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">

<!-- FORM START -->
<form class="form-horizontal">
  <fieldset>
    <div class="col-md-6">
      <h3> Preexisting Fields </h3>
      <hr/>

      <!-- First Name -->
      <div id="firstnamedrag" class="form-group" draggable="true" ondragstart="drag(event)">
        <label class="col-md-3 control-label" for="textinput">First Name</label>  
        <div class="col-md-9" >
          <input id="textinput" name="textinput" type="text" placeholder="John" class="form-control pull-right">
        </div>
      </div>
      <!-- Last Name -->
      <div id="lastnamedrag" class="form-group" draggable="true" ondragstart="drag(event)">
        <label class="col-md-3 control-label" for="textinput">Last Name</label>  
        <div class="col-md-9" >
          <input id="textinput" name="textinput" type="text" placeholder="Doe" class="form-control input-md">
        </div>
      </div>
    </div>
  </fieldset>
</form>

<!-- INSERT HERE: i want to be able to drag those items above into the panel and create a new form -->
<div id="builder" class="panel panel-default">
  <h3> Drag Fields </h3> <hr/>
  <div class="panel-body" ondrop="drop(event)" ondragover="allowDrop(event)">
    <form id="target" class="form-horizontal">
      <fieldset >
      </fieldset>
    </form>
  </div>
</div>