檢查與該插件它很容易的評論的鏈接。 可選的,你可以使用窗口小部件的調整和使用廉價的伎倆,如:
.dropzone{
margin-top: 5px;
width: 360px;
background-color: rgba(225,225,225,0.5) !important;
border-radius: 5px;
height:140px;
border: 3px dashed green;
padding-top: 150px;
}
.textForDropzone{
pointer-events:none;
padding: 10px;
margin-left: 130px;
color:black;
margin-top: -110px;
z-index:10000;
}
<form method="POST"...>
<form id="uploadFiles" class="dropzone" >
<span class="mainop">2. Upload Image: </span>
<input type="text" class="dropzone">
<h3 class="textForDropzone"> Drop Image here or click to upload </h3>
您展開輸入字段並使它看起來像裏面等文本放置區....
代碼應該是這樣的,如果你使用的小部件的調整
<form method="POST"...>
{% load widget_tweaks %}
{% csrf_token %}
<form id="uploadFiles" class="dropzone" >
<span class="mainop">2. Upload a Image: </span>{{ formUP.image|add_class:"dropzone" }}
<h3 class="textForDropzone"> Drop Image here or click to upload </h3>
檢查https://github.com/sigurdga/django-dropzone-upload有多種選項可以顯示縮略圖和個性化文字等。 – hansTheFranz