Question

我需要帮助才能回答上一个问题 How to limit the number of dropzone.js files uploaded?

哪里有使用的解决方案

Dropzone.options.myAwesomeDropzone = {
  accept: function(file, done) {
    console.log("uploaded");
    done();
  },
  init: function() {
    this.on("addedfile", function() {
      if (this.files[1]!=null){
        this.removeFile(this.files[0]);
      }
    });
  }
};

但是作为一个js numpty，我不知道在哪里放这个。我假设我的表单必须具有id myAwesomeDropzone并且上面的代码需要插入dropzone.js文档，但在哪里？如果你能提供'之后'和'之前'或替换答案，请。

如果有人能给我一些指针，那就太好了。

我的声誉不到50，所以我无法评论原始帖子。如果我将此作为一个新主题发布是错误的，请管理员不要只是惩罚我并关闭它，而是移动它或做任何事情以允许人们提供帮助。

干杯安迪

Answer 1

您的HTML表单应如下所示。注意

类=＆＃34;悬浮窗＆＃34;

和

ID =＆＃34;我的-悬浮窗＆＃34;

＆＃34; my-dropzone＆＃34; ID非常重要，DropZone将此作为＆＃34; myDropzone＆＃34; ，（连字符删除和camelcased）。因此，当您在DropZone.options中引用此ID时，它应该是＆＃34; myDropzone＆＃34;。这非常重要。

<div>
    <form action="/file-upload" class="dropzone" id="my-dropzone" style="border:2px dotted #337ab7">
      <div class="dz-message">
        Drag n drop photos here or click to upload.
        <br />
        <span class="note">(The photos are uploaded to twitter only when the tweet is sent.)</span>
      </div>
    </form>
</div>

您应该在html页面中链接css和js文件，如此

<script src="./js/dropzone.min.js"></script>
<link href="./css/dropzone.min.css" rel="stylesheet" type="text/css">

在页面加载时，您应该在页面的JS代码中初始化dropzone配置，如下所示。我限制dropzone只接受一个文件，其大小不应超过5MB。

self.options.maxFilesize = 5; self.options.maxFiles = 1;

Dropzone.autoDiscover = false;
Dropzone.options.myDropzone = {
  init: function() {
    var self = this;
    // config
    self.options.addRemoveLinks = true;
    self.options.autoProcessQueue = false;
    self.options.maxFilesize = 5;
    self.options.maxFiles = 1;
    self.options.dictFileTooBig =
      "Twitter do not allow files greater than 5MB.";
    //New file added
    self.on("addedfile", function(file) {
      console.log('new file added ', file.path);
    });
    self.on("maxfilesexceeded", function(file) {
      alert(
        "Only one photo can be attached with the tweet."
      );
    });

  }
};

现在，当你的页面加载时，你会看到表格＆amp;获得div中的拖放功能。

要访问您可以在下面的某个按钮点击事件的javascript中执行的文件。

// to get queued files
var myDropzone = Dropzone.forElement("#my-dropzone");
var files = myDropzone.getQueuedFiles();

Dropzone删除上一张图像

1 个答案: