【问题标题】:Event Thrown when Filesize is Exceeded超过文件大小时引发的事件
【发布时间】:2016-02-26 19:25:26
【问题描述】:

当您设置了最大文件大小并将超过该限制的文件拖放到其中时,DropZone 是否会引发事件?我尝试了以下事件,但它们似乎没有被触发。

错误、重置、添加文件、删除文件、删除。

目前,当您将太大的文件放到区域中时,我们的实现不会执行任何操作。我们希望提供反馈,说明该文件超出了我们对文件大小的最大限制。

【问题讨论】:

    标签: dropzone.js


    【解决方案1】:

    它不会抛出任何事件,它会返回一条错误消息。

    来自 dropzone.js 的代码 sn-p

    Dropzone.prototype.accept = function(file, done) {
      if (file.size > this.options.maxFilesize * 1024 * 1024) {
        return done(this.options.dictFileTooBig.replace("{{filesize}}", Math.round(file.size / 1024 / 10.24) / 100).replace("{{maxFilesize}}", this.options.maxFilesize));
      }
      .
      .
      .
    }  
    

    http://www.dropzonejs.com/#config-dictFileTooBig

    要抛出错误消息,请将 maxFilesize: 2, // MB 添加到配置中

    http://www.dropzonejs.com/#configuration

    previewTemplate 必须包含具有“dz-error-message”类的 div 元素

    previewTemplate: '<div class="dz-preview dz-file-preview">
      <div class="dz-details">
        <div class="dz-filename"><span data-dz-name></span></div>
      <div class="dz-size" data-dz-size></div>
      <img data-dz-thumbnail />
     </div>
     <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
     <div class="dz-success-mark"><span>✔</span></div>
     <div class="dz-error-mark"><span>✘</span></div>
     <div class="dz-error-message"><span data-dz-errormessage></span>     </div>
     </div>'
    

    http://www.dropzonejs.com/#layout

    【讨论】:

    • 我没有看到如何在表单上显示消息,我将此作为选项添加到我的代码中。但是它没有记录到控制台。 pastie.org/private/acb6avhm016rr9oxovynvq
    • 我似乎无法得到一个简单的 console.log('accept invoked');当它是接受块内的唯一代码时触发...
    • 从配置中删除接受,我只是展示代码,它不会引发任何事件
    【解决方案2】:
    var dropZoneDiv = new Dropzone("div#DropZoneDiv", {
            url: "UPLOAD",
            previewTemplate: document.querySelector('#preview-template').innerHTML,
            thumbnailHeight: 100,
            thumbnailWidth: 100,
            addedfile: function (file) {
                if (file.size > (1024 * 1024 * 50)) // not more than 5mb
                {
                    this.removeFile(file);
                    abp.message.error("Only 50 mb file size is allowed");
                }
            },
    

    【讨论】:

    • 请使用正确的代码格式并提供一些关于答案的解释。
    猜你喜欢
    • 1970-01-01
    • 2010-12-08
    • 2018-02-22
    • 1970-01-01
    • 2015-01-20
    • 2011-07-06
    • 1970-01-01
    • 1970-01-01
    • 2017-10-18
    相关资源
    最近更新 更多