圖像拖放在表單內上傳？

我正嘗試創建/製作我的第一個拖放/選擇圖片上傳。圖像拖放在表單內上傳？

我有一個後臺，我試圖添加一個「汽車」，並看到下面的表格。我試圖弄清楚，我是否需要處理表單之外的圖像或什麼是避開它的最佳方式？

理想情況下，我想允許用戶在拖/放框中的「支持文本」區域後面拖動/選擇圖像。

我想什麼，我問，因爲我相信，這是一般的jQuery處理，是什麼來處理它的最佳方式。理想情況下，當我點擊創建按鈕時，我想將其發送到另一個PHP頁面以提交到數據庫和圖像存儲的路徑，但我知道在轉到下一頁之前我需要「上傳圖像」？

2017-01-10 PeterR

看到這個例子。它可能會幫助你。

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>

來源

2017-01-10 21:27:49 Eddie

圖像拖放在表單內上傳？

回答

相關問題