layui源码详细分析系列之文件上传模块

upload模块

从今天的文章开始，将会采用自己动手实现的方式+分析作者思路的形式来讲解layui框架的其他模块。采取这样的目的也是为了更好地提高自己，希望通过该框架学习到更多的东西。

upload模块时layui框架内置模块之一，该模块实现文件上传的功能。文件上传是一个常用的功能，现在有好多主要用于文件上传的插件，而且非常好用。今天依照layui官网对该内置模块功能的描述，实现了下简易版的demo，后台使用Node.js(搭建简易web服务器非常方便，以后打算深入学习Node.js，虽然我现在偶尔还在写Java)，具体效果如下：

这个demo逻辑比较简单，对于文件上传采用面向对象的思想，设计上采用IIFE来组织整体，具体思路如下：

1. 整体采用IIFE来组织该demo的js文件
2. 该demo中文件上传是采用input[type=”file”]来实现文件的选择，使用form表单来实现文件上传，iframe来接受服务器传递的数据
3. 定义call对象，用于定义不需要暴露的相关辅助函数
4. 该js模块中主要是创建Upload构造函数，在该构造函数中实现配置参数的合并以及该demo所有html结构的节点的动态创建
5. 在构造函数上创建upload函数来实现点击之后打开文件以及提交表单等相关动作的处理

demo的组织结构图如下：

上面的demo因为使用iframe的问题会存在跨域的问题，下面分析layui框架upload模块的实现方式，框架中该模块的组织结构如下：

可见框架中该模块的代码量相对来说还是比较少的，从上图中可以看出，在该框架中作者也是采用from+iframe的方式来处理文件上传的。

仔细阅读源码后发现框架作者还实现了拖拽上传的功能，使用拖拽事件来实现，上面说过使用iframe会产生跨域问题，在该模块中作者捕获异常，有相关的提示，具体iframe跨域的处理，没有看到相关的处理。

虽然知道跨域的产生原因，但是对其处理方法CORS以及JSONP方式没有深入了解过，知识略懂，以后还要对于跨域问题深入研究下。

该模块具体的代码分析以及demo相关分析逻辑图会上传到我的GitHub上，明天周末会研究并实践一些项目，下周应该开始富文本编辑器的实现以及分析。

致远行的你我