フォームの中に画像をドラッグ＆ドロップしてアップロードしますか？

Question

最初のドラッグ/ドロップ/選択イメージのアップロードを作成/作成しようとしています。

私は "車"を追加しようとしているサイトにバックエンドを持っており、以下のフォームを参照してください。私は把握しようとしています、フォームの外のイメージを処理する必要があるか、それを回避する最善の方法は何ですか？

理想的には、ユーザーがドラッグ＆ドロップボックスの「サポートするテキスト」領域の後に画像をドラッグ/選択できるようにしたいと考えています。私は、これは、一般的にはjQueryによって処理されると考えているよう

Upload Page is Here

は、私は、私が求めています何とし、それを処理するための最良の方法は何ですか。理想的には私が作成ボタンを押すと、別の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>