Dropzone文件上传Dragn Drop?

时间:2018-09-12 08:21:29

标签: symfony upload twig dropzone

使用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 %}

enter image description here

这是它的外观,但我无法将文件放在那里。如果我将文件放在此处,则浏览器(以Chrome为例)将打开文件,我可以读取它。

问候 丹尼尔

0 个答案:

没有答案