使用Dropzone作为JS库来管理拖放功能,但这不起作用。
我来自Symfony的表格:
{% extends 'base.html.twig' %}
{%block body%} {{form_start(form,{'attr':{'id':'editform','class':'dropzone'},'action':path('objects_edit',{'id':id,'import': import}),'method':'POST'})}}
<p>Bezeichnung:</p>
<p>{{ form_widget(form.designation) }}</p>
<p>Beschreibung:</p>
<p>{{ form_widget(form.description) }}</p>
<p>Straße / Hausnummer:</p>
<p>{{ form_widget(form.street) }} {{ form_widget(form.streetnumber) }}</p>
<p>PLZ / Ort:</p>
<p>{{ form_widget(form.plz) }} {{ form_widget(form.place) }}</p>
<p>Land:</p>
<p>{{ form_widget(form.country) }}</p>
<p><button type="button" id="validator" class="btn" style="width: 100%;" onclick="parseDataToAPI();">Validieren</button><br></p>
<p>X: {{ form_widget(form.coordL) }} Y: {{ form_widget(form.coordB) }}</p>
<p>Kategorie:</p>
<p>{{ form_widget(form.category) }}</p>
<p>{{ form_widget(form.logo) }}</p>
<p>{{ form_widget(form.images) }}</p>
<p>
<div class="form-group">
<label class="col-sm-2 control-label required" for="">Images</label>
<div class="col-sm-12">
<div class="dropzone" style="width:100%; height:200px; background-color: white;"></div>
</div>
</div>
</p>
{% if import == 1 %}
<button style="width: 100%;" onclick="updateObject({{ id }}, '1');" class="btn" id="buttonupdate" disabled>{{ button_label|default('Speichern') }}</button>
{% else %}
<button style="width: 100%;" onclick="updateObject({{ id }}, '0');" class="btn" id="buttonupdate" disabled>Update</button>
{% endif %}
{{ form_end(form) }}
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script>
// init,configure dropzone
Dropzone.autoDiscover = false;
var dropzone_default = new Dropzone(".dropzone", {
paramName: "images",
url: '{{ path('objects_edit', { 'id' : id, 'import' : 0 }) }}' ,
maxFiles: 1,
dictMaxFilesExceeded: 'Only 1 Image can be uploaded',
acceptedFiles: 'image/*',
maxFilesize: 3, // in Mb
addRemoveLinks: true,
init: function () {
this.on("maxfilesexceeded", function(file) {
this.removeFile(file);
});
this.on("sending", function(file, xhr, formData) {
// send additional data with the file as POST data if needed.
// formData.append("key", "value");
});
this.on("success", function(file, response) {
if (response.uploaded)
alert('File Uploaded: ' + response.fileName);
});
}
});
</script>
{% endblock javascripts %}
这是它的外观,但我无法将文件放在那里。如果我将文件放在此处,则浏览器(以Chrome为例)将打开文件,我可以读取它。
问候 丹尼尔