Question

我有以下表格：

<form class="block-center" id="pdfForm" method="POST" action="form_threatment.php" enctype="multipart/form-data" style="margin-top: 30px;">    
  <div class="form-group push-50-t col-md-12">
    <div class="col-md-12">
      <div class="form-material form-material-primary">    
        <div class="dropzone dropzone-previews" id="pdfFile">
        </div>    
      </div>
    </div>
  </div>    
</div>

<div class="form-group push-50-t col-md-6">
  <div class="col-md-12">
    <div class="form-material form-material-primary">                               
      <input class="form-control" name="first_name" type="text" id="first_name" />
      <label for="first_name"><span class="asterix">*</span> Prénom : </label>                      
    </div>
  </div>
</div>

我像这样包含dropzone.js库：

<script src="assets/js/dropzone.js"></script>

我自己的dropzone myDropzone.js：

<script src="assets/js/myDropzone.js"></script>

在myDropzone.js文件中，我以这种方式配置了div＃pdfFile：

Dropzone.autoDiscover = false;

$(document).ready(function() {      

    Dropzone.options.pdfFile = {
        // url does not has to be written if we have wrote action in the form tag but i have mentioned here just for convenience sake 
        url: 'form_threatment.php',
        acceptedFiles: '.pdf',
        maxFilesize: 20,
        addRemoveLinks: true,
        autoProcessQueue: false, // this is important as you dont want form to be submitted unless you have clicked the submit button
        uploadMultiple: false,
        autoDiscover: false,
        paramName: 'pdf', // this is optional Like this one will get accessed in php by writing $_FILE['pic'] // if you dont specify it then by default it taked 'file' as paramName eg: $_FILE['file'] 
        previewsContainer: '#pdfFile', // we specify on which div id we must show the files
        clickable: false, // this tells that the dropzone will not be clickable . we have to do it because v dont want the whole form to be clickable 

        accept: function(file, done) {
            console.log("uploaded");
            done();
        },
        error: function(file, msg){
            alert(msg);
        },
        init: function() {
            var myDropzone = this;

            // #submit-all it the id of the submit button
            $("#submit-all").on("click", function(e) {
                var files = $('#pdfFile').get(0).dropzone.getAcceptedFiles();
                console.log(myDropzone);
                console.log(files);
                //e.preventDefault();
                //e.stopPropagation();
                myDropzone.processQueue(); // this will submit your form to the specified action path
                // after this, your whole form will get submitted with all the inputs + your files and the php code will remain as usual 
                //REMEMBER you DON'T have to call ajax or anything by yourself, dropzone will take care of that

            });                                             
        }
    };
    Dropzone.options.pdfFile.init();
});

加载页面时，出现错误：

未捕获错误：未提供网址。

之前，我修改了dropzone.js文件以设置Dropzone选项，但我重置了 dropzone.js 库文件并决定在 myDropzone.js中设置选项文件。

当选项在 dropzone.js 文件中设置时，我没有错误，但在重置这些选项后，并在 myDropzone.js 中设置它们，我有这个错误让我相信 myDropzone.js 中选项未初始化。

事实上，当我点击＃submit-all按钮时，init（）功能正常工作。

有关如何解决问题的任何想法吗？

好的，我解决了：

未捕获错误：未提供网址。

删除它。

现在，当我提交时，我收到以下错误：

未捕获的TypeError：myDropzone.processQueue不是函数

在init（）函数中。

修改

我解决了上一个上一个错误，删除了processQueue函数，并阻止了我上传页面的 Validate 按钮，直到PDF没有成功上传。我知道这是一个丑陋的黑客，但我没有找到另一种方法来做到这一点。

Answer 1

我想到了三件事：您的主要dropzone元素（DROP的位置）是#pdfForm 你想要#pdfFiles中的预览。那说：

1）代码必须是Dropzone.options.pdfForm而不是Dropzone.options.pdfFile

2）当自动发现被设为真时，Dropzone.options.pdfForm是正确的语法（默认）。但如果想要自动发现为假，你可以尝试：
var myDropzone = new Dropzone("#pdfForm", { url: "form_threatment.php", other options... // JS : Dropzone class或 $("#pdfForm").dropzone({ url: "form_threatment.php", other options... // JS : jquery style

3）如果在JS中指定“form_threatment.php”，则不必在HTML中执行此操作。然后，您可以从表单

中删除action =“form_threatment.php”

如果您决定使用autodiscover = true（defalut），请参阅我对jQuery版本3可能出现问题的其他答案：Why is my dropzone javascript form not working?

Answer 2

请勿将您的dropzone代码放入jquery $(document).ready(function(){ });

中

Answer 3

在尝试了所有提案之后，我实际上在我的treatment_form.php中解决了这个问题：

我做了两次威胁：

收到PDF后，我检查一切正常，然后将其上传到我的服务器。
当用户提交表单时，我会验证表单中的其他信息，并威胁他们知道PDF已上传。

Dropzone：未捕获错误：未提供URL

3 个答案: