一种高自由度文件上传系统的实现方法技术领域
本发明涉及网页前端技术领域，特别是一种高自由度文件上传系统的实现方法。
背景技术
在网页前端，为实现文件的上传；使用经常期望能在单击上传按钮时上传多个范
围内的符合类型的文件，并且可以上传多次；同时还可以删除和批量删除，查看大小；通过
设置引用插件的参数：如是否显示文件信息，显示哪些文件信息，是否带删除功能，是否有
数量限制等，来自由地定义出专属于自己的上传文件系统。同时，期望可以兼容多浏览器，
美化界面，简化操作。
发明内容
本发明解决的技术问题在于提出一种高自由度文件上传系统的实现方法，满足前
述现有技术中的用户需求。
本发明解决上述技术问题的技术方案是：
所述的方法是通过前端JS控制单按钮多文件多次上传，并可将所有上传文件组成
数组提供给后端接收；
具体实现方法如下：
步骤一、设计一个单上传INPUT的美化效果，用DIV包裹待上传的类型为“FILE”的
INPUT；通过CSS设置该上传用的INPUT透明度为0，位置为绝对位置，设置成和DIV重叠；通过
点击美化的DIV即可触发点击上传INPUT；
步骤二、给该上传INPUT增加一个属性MULTIPLE，该属性的作用是使该INPUT在点
击后可以一次上传多个文件，即可多选；
步骤三、通过JS撰写动态增加同类型的INPUT的函数；在数量限制内，每点击上传
一次，INPUT的ONCHANGE事件可以侦测到是否上传了文件，在该INPUT后面新增一个相同的
INPUT；将原INPUT的CSS属性Z-INDEX设为1，并增加属性DISABLED，并设为不可点击；新增的
INPUT的CSS属性Z-INDEX设为10，即在最上层可以点击；以实现多次上传；
步骤四、通过JS撰写动态生成文件信息DIV的函数，在数量限制内，点击INPUT的同
时生成该INPUT所上传文件的文件信息DIV，DIV显示文件类型图标；通过判断文件的后缀显
示相应后缀的文件图标；
步骤五、撰写相应的“文件类型判断，显示图标函数”、“文件大小转换函数”、“删除
文件函数”，删除文件函数里通过传参判定是删除单个文件还是删除全部文件；
步骤六、提高用户体验，增加友好提示、上传说明，并美化界面。
所述的步骤四中，DOC显示WORD的图标；文件标题太长时可截取，截取部分用省略
号代替、文件大小以KB为单位、文件状态为待传、删除按钮。
本发明方案的有益效果如下：
本发明使用方便：方法是引入JQUERY插件和本发明的集成插件，然后在JS里设置
参数并调用；
本发明功能多且可以自定义：功能包括单按钮上传、一次上传多文件、多次上传、
上传显示文件信息、可选的删除功能等；自定义方面：可自定义一次上传多个还是单个、可
自定义数量、可自定义是否显示图标，标题，大小、可自定义是否有单个删除功能或批量全
部删除功能等；
本发明可重复应用于类似场景：只要牵涉到上传多文件，需要JSON数组数据连通
后台的，基本都可以使用；
本发明兼容性高：只使用了JS语言，绝大多数主流浏览器都可以适用。
附图说明
下面结合附图对本发明进一步说明：
图1为本发明的流程图；
图2、图3为本发明具体实施例的应用操作视图。
具体实施方式
下面将结合附图，对本发明实施例中的技术方案进行清楚、完整的描述，显然，所
描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，
本领域普通技术人员在没有做出实质性创造获得的方案，都属于本发明保护的范围。
如图1所示，本发明的实现顺序和方法：
1：单按钮多文件多次上传，每次可上传多个文件的实现方法是：设计一个单上传
INPUT的美化效果：用DIV包裹待上传的类型为“FILE”的INPUT，通过CSS设置该上传用的
INPUT透明度为0，POSITION为绝对位置，设置成和DIV重叠；这样做的效果就是点击美化的
DIV即可触发点击上传INPUT；
2：给该INPUT增加一个属性MULTIPLE，该属性的作用是使该INPUT在点击后可以一
次上传多个文件，即可多选；
3：通过JS撰写动态增加同类型的INPUT的函数，即在数量限制内，每点击上传一次
(INPUT的ONCHANGE事件可以侦测到是否上传了文件)，就在该INPUT后面新增一个一样的
INPUT(为方便起见，以后统称前一个INPUT为INPUT1，动态新增的INPUT为INPUT2)，将
INPUT1的CSS属性Z-INDEX设为1，并增加属性DISABLED，将上一个INPUT1设为不可点击；
INPUT2的CSS属性Z-INDEX设为10，即在最上层可以点击；此步骤实现了多次上传；
4：通过JS撰写动态生成文件信息DIV的函数，即在数量限制内，点击INPUT的同时
生成该INPUT所上传文件的文件信息DIV，DIV显示文件类型图标(通过判断文件的后缀显示
相应后缀的文件图标，如.DOC则显示WORD的图标)、文件标题(若太长可截取，截取部分用省
略号代替)、文件大小(以KB为单位)、文件状态(一般为待传)、删除按钮(超链接，点击触发
删除函数)。
5：撰写相应的“文件类型判断，显示图标函数”、“文件大小转换函数(四舍五入取
整，以KB为单位)”、“删除文件函数”。删除文件函数里通过传参判定是删除单个文件还是删
除全部文件。
6：提高用户体验，增加友好提示、上传说明等，并美化界面。
即点击美化的上传按钮，即弹出文件选择窗口，根据习惯选择一个或多个文件，点
击“打开”关闭窗口，即可在文件信息位置看到本次上传的所有文件的标题、状态(因未传到
服务器所以状态是“待传”)、大小(单位为KB)、删除按钮(可删除对应的文件，使它不会被上
传)以及全部删除按钮。这些文件列表通过CSS样式控制可以显示不同的布局；当上传文件
数量尚未超过上限时，还可以多次通过同一个按钮上传，每次上传多个；若上传数量超出限
制则提示用户文件数量太多，上传动作会变为无效。通常这个上传系统组件会嵌入到一个
FORM表单里，当选择完毕所有的状态为待传的文件后，提交FORM表单，即可将所有列出的文
件上传至服务器。本上传系统的新增删除功能仅限于客户端，当提交到服务器端后，若要删
除文件，则需要后端数据库代码配合，此处不再赘述。
本发明具体实施例的应用操作视图，可以参见图2、3所示。