Question

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

我有一个后端到我试图添加“汽车”的网站，并看到下面的表格。我想知道，我是否需要处理表格外的图像或者最好的方法来解决它？

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

Upload Page is Here

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

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

图像在表单内拖放上传？

1 个答案: