文件上传组件

概述

项目开发中我们经常会使用到上传图片、上传文件的功能，上传文件功能由：表单元素、CSS样式、JS交互、表单提交等一系列操作和元素组成，如果都放入表单元素中显得代码复杂和代码冗余，同时维护成本也比较高，只有一个文件上传勉强可以接收，如果一个表单中有N个上传文件的功能，单单一个上传文件的功能估计都写的够呛，更别说其他的表单元素处理了，从代码的简洁性、可维护性角度出发，我们自定义开发了一套上传文件的组件，本着开箱即用的原则，要求组件具备：可插拔式、灵活性、可维护性、高效性等等，在需要实现文件上传的地方只需要简单的引入组件即可，无法再写那么多冗余而又费时费力的代码，根据项目的实际要求和经验，我们开发了一套灵活多年的系统框架组件：文件上传组件，上一章节《图片上传组件》我们详细的说明了图片上传的方式和原理，本章节我们将详细的说明文件上传组件的方式和原理；

文件上传

文件上传组件是框架中开发的另一套独立组件，专门上传除图片意外的其他文件格式的组件，如xls,xlsx,doc,docx等等一系列文件，支持上传单个文件个多个文件，同时参数配置说明即可。

• 组件：{:widget('upload/file',array('file|附件|5|xls,xlsx,doc,docx',isset($info['fileName']) ? $info['fileName'] : ''))}

• 参数：name：file|附件|5|xls,xlsx,doc,docx

`file`：组件名称，此字段对应数据表中的字段名称`file`;
`附件`：这个文字是动态指定上传按钮的名称，组件会自动解析为`上传附件`；
`5`：这个参数表示组件最多可以上传多个文件；
`xls,xlsx,doc,docx`：表示上传文件组件允许上传的文件格式,`如果上传格式不写，组件会默认调用全局文件上传格式进行验证`；

• 组件使用

上传文件组件的使用也非常简单，与单图、多图组件的引入无异，直接一行代码引入即可，其他复杂的逻辑和业务处理全部交给组件自身去解决。

<form class="layui-form model-form" action="" style="width:80%;">
    <div class="layui-form-item">
        <label class="layui-form-label">附件：</label>
        <div class="layui-input-block">
           {:widget('upload/file',array('file|附件|5|xls,xlsx,doc,docx',isset($info['fileName']) ? $info['fileName'] : ''))}
        </div>
    </div>
</form>

• 效果展示：