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

时间:2015-01-02 11:30:28

标签: javascript php wordpress dropzone.js

所以我有我的php添加文件

site.com/add.php

这里基于用户点击的图像(类别imges)我用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。

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

如果它在同一页面上,只有在其他页面中包含

时才会有效

有解决方法吗?

一些额外的信息 dropzone.js已加载到页眉

网站是wordpress

1 个答案:

答案 0 :(得分:0)

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

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