前言
dropzone-ie 是一个基于 Dropzone.js 实现的专门为 IE 浏览器适配的 npm 包。由于 IE 浏览器版本较老，没有原生支持上传文件的特性，所以需要引入第三方工具来实现文件上传的功能。本文主要介绍如何使用 dropzone-ie 实现在 IE 浏览器中上传文件。
安装
在本地项目中使用 npm 安装 dropzone-ie：
npm install dropzone-ie --save
配置
在项目中引入 dropzone-ie 文件。你可以通过 cdn 或是本地文件的方式引入。例如：
<script src="path/to/dropzone-ie.js"></script>
HTML 结构
在 HTML 文件中，需要提供一个空的 div 容器用于展示上传的文件。例如：
<div id="my-dropzone"></div>
JS 配置
在 JavaScript 中，需要进行以下配置：
-- -------------------- ---- -------
--------------------- - ------
-- -- -------- --
--- ---------- - --- ------------------------ -
---- ----------
---------- -------
--------------- -----
--------- --
-------------- --------------------
------------------- ------------
-------------------- -----------------
--------------- ----- ----------------- ----------------------------
-------------------- ----------
------------------ -----------------------
----------------- -------
------------------- --------
----------------------------- ---------------
--------------- -------
--------------------------- ------------
-------- -
---------------- ------- - - -----
-
---
-- ------
------------------------ -------------- ---- --------- -
--------------------- - -----------
---
------------------------ -------------- --------- -
------------------- - -----------
---
---------------------- -------------- ------------- ---- -
------------------- - -----------
---其中，Dropzone.autoDiscover = false 是因为我们不需要找到所有 class 为 dropzone 的元素自动转换成 dropzone 上传区域，因为在 IE 浏览器下不支持。
参数说明
new Dropzone(element, options) 初始化对象构造函数中有两个参数。第一个参数为选择上传区域的 HTML 元素的选择器或直接传入 HTML 元素本身。第二个参数是一个可选配置对象，用于配置上传区域。
配置选项
url
Type: String
上传文件的地址。
method
Type: String
上传文件的请求方法，默认值为 post。
withCredentials
Type: Boolean
是否携带 CORS 请求的凭证（cookie、HTTP 认证以及客户端 SSL 证明等）。默认为 false。
timeout
Type: Number
上传文件的超时时间（毫秒）。默认值为 0，即没有超时时间。
maxFilesize
Type: Number
限制上传文件的大小，单位 MB。默认值为 256 MB。
maxFiles
Type: Number
限制上传文件的数量。默认值为 1。
paramName
Type: String
设置上传文件参数名字。默认值为 file，即在后端接收文件的参数名为 file。
uploadMultiple
Type: Boolean
是否允许一次上传多个文件。默认为 false。
acceptedFiles
Type: String
可上传文件的类型。默认值为 null，即不限制。可以使用 MIME 类型（例如 image/*、audio/*、video/*、text/*），也可以使用文件的扩展名（例如 .pdf）。
addRemoveLinks
Type: Boolean
设置是否显示删除按钮。默认为 false。
dictDefaultMessage
Type: String
设置提示信息。例如："拖拽文件到此处上传"。默认为英文。
dictFallbackMessage
Type: String
提示用户他们的浏览器并不支持拖放上传。默认为英文。
dictFileTooBig
Type: String
提示用户某个文件过大，不能超过 maxFilesize。其中 {{}} 中的内容是动态生成的文件大小，单位 MB。默认为英文。
dictInvalidFileType
Type: String
提示用户某个文件类型不支持。默认为英文。
dictResponseError
Type: String
提示出现服务器响应错误。其中 {{statusCode}} 是动态生成的响应状态码。默认为英文。
dictCancelUpload
Type: String
提示用户取消上传文件的按钮上的文字。默认为英文。
dictUploadCanceled
Type: String
提示用户上传已取消的信息。默认为英文。
dictCancelUploadConfirmation
Type: String
提示用户确定要取消上传按钮上的文字。默认为英文。
dictRemoveFile
Type: String
文件列表中，每个文件后显示的删除按钮的文字提示。默认为英文。
dictRemoveFileConfirmation
Type: String
删除文件的确认信息。默认为英文。
headers
Type: Object
设置请求头信息。默认值为 {}。
实例展示
下面是一个上传图片的案例，简单解释了如何使用 dropzone-ie 实现在 IE 浏览器中上传图片。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ----------- ------------
------- ----------------------------------------------------------------------------
------- --------------------------------------------------------------------------------
------- --------------------------------
----- ---------------------------------------------------------------------------- -----------------
-------
------
------ ----------- ---------
---- -----------------------
--------
--------------------- - ------
--- ---------- - --- ------------------------ -
---- ----------
---------- -------
--------------- -----
--------- --
-------------- ----------
------------------- ------------
-------- -
---------------- ------- - - -----
-
---
------------------------ -------------- ---- --------- -
--------------------- - -----------
---
------------------------ -------------- --------- -
------------------- - -----------
---------------------------
---
---------------------- -------------- ------------- ---- -
------------------- - -----------
---
---------
-------
-------结语
dropzone-ie 能够使我们更方便地实现在 IE 浏览器中上传文件的功能。当然，它的用途并不止于此。只要我们按照以上配置线路，就能够根据实际业务需求灵活配置，满足我们不同的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600576f281e8991b448eabac