从单独的文件加载拖放区不会加载


Loading dropzone from a separate file, won't load

所以我有我的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>

该脚本是在堆栈溢出上多次使用/发布的基本脚本,用于在表单中使用拖放区。

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

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

有解决方案吗?

一些额外信息拖放区.js加载到页眉中

该网站在WordPress中

Dropzone.js脚本是否包含在第一页(添加.php)中?在这种情况下,一旦页面加载,脚本将找到具有类拖放区的所有表单元素,但它将找到具有类拖放区的 0 元素。因此,您必须在加载表单时手动创建拖放区。您可以尝试在文件中添加此行,格式为:

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