將圖像拖放到表單中嗎？

Question

我正在嘗試創建/進行我的第一個拖放/選擇圖像上傳。

我有一個后端，該站點要添加“汽車”並查看下面的表格。 我想弄清楚，我需要處理表格外的圖像還是解決該問題的最佳方法是什么？

理想情況下，我希望允許用戶在拖放框中的“支持文本”區域之后拖動/選擇圖像。

上傳頁面在這里

我想我在問什么，因為我相信這通常是由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>