从单独的文件加载 dropzone，不会加载

Question

所以我有我的 php 添加文件

site.com/add.php

这里基于用户单击的图像（类别图像）我使用 jquery 加载正确的表单

$("#54").click(function(e) {
                            e.preventDefault();
                            $(".formcontainer").load("<?php bloginfo ('url'); ?>/wp-content/themes/twentythirteen/inc/cat1.php", function(){
                                $('#userid').val(user_id);
                                $('#userrole').val(userrole);
                                jQuery("#formID").validationEngine();
                            });
                            //alert( "test" );
                            var subCat = "54";

                            //alert (user_id);


                            $.ajax({    

                                url: '../getThirdSubCategories.php',
                                data: {"subCat":subCat},
                                type: 'post',
                                success: function(data)
                                {   
                                    //alert(data)       
                                    $("select#sub_category_id").html(data); 
                                    //$("select#third_level_sub_category_id2").html(data);                  
                                }
                            }); 


                            });

这会将 cat1.php 加载到页面中，例如，我使用了非常基本的表单（不是我的大表单——同样的原则适用）

<script>





                 Dropzone.options.mydropzone = {
// 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: 'upload.php', 
          addRemoveLinks: true,
          autoProcessQueue: false, // this is important as you dont want form to be submitted unless you have clicked the submit button
          autoDiscover: false,
          paramName: 'pic', // this is optional Like this one will get accessed in php by writing $_FILE['pic'] // if you dont specify it then bydefault it taked 'file' as paramName eg: $_FILE['file'] 
          previewsContainer: '#dropzonePreview', // we specify on which div id we must show the files
          clickable: true, // 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;
            //now we will submit the form when the button is clicked
            $("#sbmtbtn").on('click',function(e) {
               e.preventDefault();
               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
            });

          } // init end

        };


        </script>

 <form method="post" action="upload.php" class="dropzone" id="mydropzone" enctype='multipart/form-data'> //remember we gave an id mydropzone to the form

           <label>Username:<input type="text" name="uname"/> </label>
           <label>Password:<input type="text" name="pass"/> </label>
           <div id="dropzonePreview"></div>
           <input type="button" id="sbmtbtn" value="submit"/>


  </form>

该脚本是在堆栈溢出中多次使用/发布的基本脚本，用于在表单中使用 dropzone。

我现在的问题是它加载了，但拖放区功能没有加载，即我无法上传图片，使用点击或拖放

如果它在同一个页面上，这一切都有效，只是从另一个页面包含时就不行

有解决办法吗？

一些额外的信息 dropzone.js 在页眉中加载

网站在 wordpress 中

Answer 1

Dropzone.js 脚本是否包含在第一页 ( add.php ) 中？在这种情况下，一旦页面加载，脚本将找到所有具有类 dropzone 的表单元素，但它会找到具有类 dropzone 的 0 元素。因此，您必须在加载表单时手动创建 Dropzone。您可以尝试使用以下形式在文件中添加这一行：

new Dropzone("#mydropzone" , Dropzone.options.mydropzone );