Question

我试图第一次使用dropzonejs，并且预览容器有问题。

当我拖动图像时，它甚至出现在表单的末尾。

如何在DIV dropzoneDragArea或dropzone-previews中查看图像预览，而不是在某些形式的随机位置查看
我需要使用表单提交图像时如何删除和添加按钮

非常感谢您的帮助。

这是我在做什么，我添加了dropzone.js文件我在dropzone中有以下HTML代码

<form role="form" id="form" class="dropzone dropzone-manual" enctype="multipart/form-data" method="post" action="">

<div class="col-md-6">
<div id="dropzoneDragArea" class="dz-default dz-message dz-clickable">
<span>Attach Receipt</span>
</div>
<div class="dropzone-previews" id="dropzone-previews"></div>

<input type="number" class="form-control" name="amount" id="amount">

<button type="submit" id="submit" class="btn btn-info">

这是JS

<script>
$(function(){
  Dropzone.options.dropzoneDragArea = {
    maxFiles: 1,
    maxFilesize: 5,
    acceptedFiles: 'image/*',
    addRemoveLinks: true,
    autoProcessQueue: false,
    autoDiscover: false,
    paramName: 'prod_pic',
    previewsContainer: '#dropzoneDragArea',
    clickable:'#dropzoneDragArea'
  };
});
</script>

这是我的CSS，以防您也需要

<style>
#dropzoneDragArea {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    padding: 60px;
    text-align: center;
    margin-bottom: 15px;
    cursor: pointer;
}
.dropzone-manual.dropzone .dz-message {
    margin-top: 0;
}
.dropzone .dz-message {
    margin-top: 45px;
    color: #03a9f4;
}
.dropzone .dz-message {
    text-align: center;
    margin: 2em 0;
}
.dropzone, .dropzone * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.dropzone, .dropzone * {
    box-sizing: border-box;
}
</style>

dropzonejs预览容器

0 个答案: