Dropzone.js - 與常規表單結合 - 詢問定位

我正在使用Dropzone並嘗試將它與常規表單結合使用，因此我閱讀本教程https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone 並且我可以成功完成。然而，我想要其他輸入文本字段和提交按鈕在窗體標籤之外（在dropzone之外），所以我使用css position:absolute將文本輸入爲表單上方並提交按鈕下面的表單Dropzone.js - 與常規表單結合 - 詢問定位

但我忘了如果我選擇圖片上傳的形式dropzone的高度將延長。所以它失敗了。（見截圖）

<form id="my-awesome-dropzone" class="dropzone" style="position:relative"> 
    <div class="dropzone-previews"></div> 

    Username : <input type="text" name="username" style="position:absolute; top:-50px; left:0px; /> <br/> 
    Email: <input type="text" name="email" style="position:absolute; top:-40px;left:0px; /> <br/> 

    <button type="submit" style="position:absolute;top:100px;left:0px;">Submit data and files!</button> 
</form>

我甚至動按鈕形式和使用HTML5屬性form="my-awesome-dropzone"之外，但它不能正常工作。我怎麼辦？

來源

2016-12-28 doflamingo

我覺得搗鼓將是很好這裏但是從外觀上來看，如果刪除了所有按鈕的內聯CSS，就會搬出的方式，當文件被添加到拖放區。 –

您可以這樣做，填充20px到底部的表格，並將button附加到absolute, bottom: 0px，並且它將在表格末尾，即使存在上傳的圖片也是如此。

$(function(){ 
 
    Dropzone.autoDiscover = false; 
 
    
 
    var myDropzone = new Dropzone("#my-awesome-dropzone", { url: "/file/post"}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="http://www.dropzonejs.com/new-js/dropzone.js"></script> 
 
<link href="http://www.dropzonejs.com/css/dropzone.css" rel="stylesheet"/> 
 

 
<form id="my-awesome-dropzone" class="dropzone" style="position:relative; padding-bottom: 30px;"> 
 

 
    <input type="email" name="username" /><br> 
 
    <input type="password" name="password" /><br> 
 

 
    <div class="dropzone-previews"></div> 
 
    
 
    <button type="submit" style="position: absolute; bottom: 0px;">Submit data and files!</button> 
 
</form>

來源

2016-12-28 14:31:52 Ultrazz008

你是我的英雄。 – doflamingo

我認爲你的問題的dropzone重疊提交按鈕是由於形式有style="position:relative"和按鈕有style="position:absolute;top:100px;left:0px;"。刪除它們兩個。

來源

2016-12-28 14:26:12

如果我刪除它將看起來像我的屏幕截圖中的第一個案例 – doflamingo

@doflamingo好的，如果從窗體本身刪除dropzone類，創建一個div並向該div添加類會怎麼樣？將dropzone附加到表單內的元素而不是整個表單。 –

我曾經寫過你的方法。該位置是完美的，但......它不能同時提交與其他正常形式 – doflamingo

Dropzone.js - 與常規表單結合 - 詢問定位

回答

相關問題