表单 > 文件上传

注意! 该文件上传演示可能会返回一个错误,一旦后台服务正确配置,即可知道是什么原因造成该错误。

我的文件上传!

文件上传常见问题


当我将文件拖进来的时候,提示错误 "文件已经存在".

这很可能是由Dropzone的自动检测功能引起的。

当Dropzone启动时,会扫描整个文档,并查找带有dropzone样式的元素,然后为每个找到的元素创建一个Dropzone实例,如果你在之后手动创建一个同样的Dropzone实例,那么会出现上面的错误提示。

您可以按照如下方式编辑:

  1. 采用以下方式,关闭全局自动检测功能: Dropzone.autoDiscover = false;, 或则
  2. 采用以下方式,关闭具体元素的自动检测功能: Dropzone.options.myAwesomeDropzone = false;

在大多是情况下,并非一定要在程序中创建一个Dropzone实例,一个很好的建议是, 保持autoDiscover可用状态,并在初始配置选择项中配置Dropzone。


为什么不支持大文件上传?

在Dropzone的配置选项中,有个maxFileSize的配置参数,默认值为256(MB) 。 如果所上传的文件大小大于该值,请调整该参数为合适的值。 然而,大部分文件存储服务器都会限制文件的大小,请检查您上传的文件是否是合适的大小。


怎么才可以在文件上传结束后,得到一个通知消息?

目前,还没有一个单独的事件处理该功能,不过,您可以监听文件上传是否完成,每个文件上传完成后都激活该监听事件, 然后查看在文件上传处理器中是否还有未处理的文件。


为什么一些文件缩略图产生不了?

在Dropzone的选项中,有个maxThumbnailFilesize选项,默认值为 10(MB), 该选项用于阻止浏览器下载太大的图片,以免浏览器打开过慢,您可以调整该选项的大小。


怎么才可以在文件上传结束后,得到一个通知消息?

目前,还没有一个单独的事件处理该功能,不过,您可以监听文件上传是否完成,每个文件上传完成后都激活该监听事件, 然后查看在文件上传处理器中是否还有未处理的文件。

Dropzone.options.myDrop = {
  init: function() {
    this.on("complete", function() {
      if (this.filesQueue.length == 0 && this.filesProcessing.length == 0) {
        // 文件上传完成,上传队列中没人任何未上传的文件。
      }
    });
  }
};

如果服务器返回错误,如何显示该错误?

通常你需要在服务器上做一些验证工作,以查看文件是否是真实可靠的。 如果你希望Dropzone显示任何遇到的错误信息,你所需要做的就是将可能的值在400 - 500范围内的的HTTP状态码发回服务器。

Dropzone将会确定所上传的文件是无效的,之后会显示相应的错误信息。

在大多数的框架中,这些错误代码是自动生成的,然后你将这些错误代码发送到客户。 比如,在PHP,你可以在header指令中设置它们。


如何添加一个取消按钮,用来终止正在进行的上传操作?

从版本version 3.5.0开始,有个选项可以做到这点: addRemoveLinks。 只要添加一个<a class="dz-remove">Remove file</a>元素到将要删除的文件预览中, 将会变为 取消上传,如果当前文件正在上传,随后会出现一个确认对话框。

你可以配合这些选项一起使用:dictRemoveFile, dictCancelUploaddictCancelUploadConfirmation

如果你希望自己创建按钮,你可以参照以下的方式:

<form action="/target-url" id="my-dropzone" class="dropzone"></form>

<script>
  // myDropzone是一个带有id属性的元素配置项
  // 该id的值为my-dropzone (或 myDropzone)
  Dropzone.options.myDropzone = {
    init: function() {
      this.on("addedfile", function(file) {

        // 创建一个删除按钮
        var removeButton = Dropzone.createElement("<button>删除文件</button>");


        // 定义一个Dropzone实例变量
        var _this = this;

        // 监听click事件
        removeButton.addEventListener("click", function(e) {
          // 确认点击该按钮并非是提交表单:
          e.preventDefault();
          e.stopPropagation();

          // 删除文件预览
          _this.removeFile(file);
          // 如果你想删除服务器上的文件,
          // 你可以在这里发起AJAX请求
        });

        // 添加文件预览事件按钮
        file.previewElement.appendChild(removeButton);
      });
    }
  };
</script>

如何在上传的文件中,提交附加数据?

如果你的Dropzone元素是<form>,那么所有的隐藏输入域,将会随文件上传,自动以POST的方式提交。

示例:

<form action="/" class="dropzone">
  <input type="hidden" name="additionaldata" value="1" />

  <!-- 如果你想控制回退表单,只要在这里添加: -->
  <div class="fallback"> <!-- 这里的div元素将会被移除,如果回退并不是必要的 -->
    <input type="file" name="youfilename" />
    etc...
  </div>
</form>

文件上传后,我想显示附加信息。

想要获取从服务器传回的信息,请使用事件success,参照以下方式:

Dropzone.options.myDropzone = {
  init: function() {
    this.on("success", function(file, responseText) {
      // 在这里处理返回的文本,比如,添加文本信息到预览事件中:
      file.previewTemplate.appendChild(document.createTextNode(responseText));
    });
  }
};

如何显示已存储在服务器上的文件。

虽然当前没有可用的方法函数做到这点,但你可以使用Dropzone的默认事件处理器做到到这点。

意思是这样的,创建一个mock文件,然后调用事件处理器addedfilethumbnail,以显示出一个文件预览。

// 创建mock表单:
var mockFile = { name: "Filename", size: 12345 };

// 调用默认addedfile事件处理器
myDropzone.emit("addedfile", mockFile);

// 增加显示文件缩略图的选项:
myDropzone.emit("thumbnail", mockFile, "/image/url");

// 如果你使用了maxFiles选项, 请确定你已经调整该参数值
// 到合理的数值:
var existingFileCount = 1; // 已经上传完成的文件数量
myDropzone.options.maxFiles = myDropzone.options.maxFiles - existingFileCount;

使用自定义的配置项实现

如果你并不特别喜欢使用Dropzone默认的让用户确认是想要取消还是删除文件,而喜欢使用一些其他的方式做到这点(比如:引导的方式), 那么也很简单,你只要覆盖Dropzone.confirm方法便可以。

// 在用户返回的时候,接受或拒绝函数便会被调用,

// 并没有强制要求拒绝,所以,在调用它之前,请确认并检查文件是否存在! 
// 如果文件不存在,则什么也不做
Dropzone.confirm = function(question, accepted, rejected) {
  // 让用户点击确定或者接受按钮,如果用户接受,则调用 accepted()函数,反之调用rejected() 函数。
  
  
};

怎么限制文件数量

幸运的是,从3.7.0开始,Dropzone 支持 maxFiles选项。简单设置下,就可以达到你想要的数量要求。 如果你并不想拒绝查看的文件,那么只要简单的注册maxfilesexceeded事件,然后立即删除该文件。

myDropzone.on("maxfilesexceeded", function(file) { this.removeFile(file); });