Dropzone.js无法通过编程方式创建实例问题求助

我之前也踩过Dropzone这种“静默失败”的坑，明明代码看起来没问题，但就是不工作还没报错，大概率是初始化时机、配置冲突或者变量问题，咱们一步步排查：

1. 初始化时机不对，找不到DOM元素 #

你写的方式一脚本如果放在<form>标签前面，或者没等页面DOM加载完成就执行，那$("#imageForm")根本找不到元素，自然没法初始化Dropzone。

解决办法：把脚本放在$(document).ready()回调里，或者直接挪到页面底部（</body>标签之前），确保DOM已经渲染完成：

$(document).ready(function() {
  $("#imageForm").dropzone({ 
    url: websiteFolder + "upload.php",
    maxFiles: 1 // 可以补上你需要的配置，比如和类方式一样的单文件限制
  });
});

2. 自动发现机制和手动配置冲突 #

Dropzone默认会自动识别带dropzone类的表单并初始化，如果你用方式二的Dropzone.options.imageForm配置，一定不能给表单加dropzone类——否则自动初始化会直接覆盖你的自定义配置，导致写的参数根本不生效。

另外，这个配置代码必须放在Dropzone.js加载之后，<form>元素定义之后执行，顺序错了也会无效。

3. 全局变量websiteFolder未定义 #

方式一里用到了websiteFolder，如果这个变量没有在全局作用域正确定义（比如忘记声明，或者PHP输出的变量没传到前端），那最终的url会变成undefinedupload.php，Dropzone可能因为无效url静默失败。

解决办法：先在控制台打印确认变量值：console.log(websiteFolder)，或者直接用PHP输出路径代替全局变量，避免作用域问题：

url: "<?php print $website['folder']; ?>upload.php"

4. 禁用自动发现避免冲突 #

有时候手动初始化和Dropzone的自动发现机制会打架，最稳妥的方式是先禁用自动发现，再手动初始化：

Dropzone.autoDiscover = false; // 放在Dropzone加载之后，初始化之前
$(document).ready(function() {
  $("#imageForm").dropzone({ 
    url: "<?php print $website['folder']; ?>upload.php",
    maxFiles: 1,
    paramName: "file",
    maxFilesize: 2
  });
});

给你两个完整的正确示例 #

方式一（手动初始化） #

<form id='imageForm'></form>

<!-- 先加载Dropzone.js -->
<script src="path/to/dropzone.min.js"></script>
<script>
Dropzone.autoDiscover = false;
$(document).ready(function() {
  $("#imageForm").dropzone({ 
    url: "<?php print $website['folder']; ?>upload.php",
    maxFiles: 1,
    paramName: "file",
    maxFilesize: 2,
    accept: function(file, done) {
      if (file.name === "justinbieber.jpg") {
        done("Naha, you don't.");
      } else {
        done();
      }
    }
  });
});
</script>

方式二（通过Dropzone.options配置） #

<!-- 注意：form不要加dropzone类 -->
<form id='imageForm'></form>

<script src="path/to/dropzone.min.js"></script>
<script>
Dropzone.options.imageForm = {
  url: "<?php print $website['folder']; ?>upload.php",
  paramName: "file",
  maxFilesize: 2,
  maxFiles: 1,
  accept: function(file, done) {
    if (file.name === "justinbieber.jpg") {
      done("Naha, you don't.");
    } else {
      done();
    }
  }
};
</script>

内容的提问来源于stack exchange，提问作者MastaBaba