试用过一些资源，发现无法满足项目业务需求，或者无法满足个人的免费要求。因此，我决定从第一行代码开始，来编写一个即免费又好用的玩意。它可以覆盖大部分应用场景，同时也必须高效、稳定、易配置。是的，正是出于这个动机，才有了你看到的这个小项目。个人水平有限，欢迎各位网友批评指正，也可与我联系交流（Email：[email protected]； QQ：1016981640）
- 文件类型可配置
- 允许文件大小可配置
- 是否开启多文件上传可配置
- 多文件上传数可配置
- 支持样式自定义
- 支持单文件上传及删除
- 支持多文件一键上传及删除
- 支持实时展示上传进度条
- 支持上传前文件预览
实际需要用到这里的文件可能只有：
easyUpload.js
easy-upload.less
easy-upload.css
font/
img/
easyUpload.js是插件的主要文件；easy-upload.less便于对css修改；easy-upload.css是less预处理后编译文件，对less不熟悉可以直接修改它；font文件夹里有插件需要用到的字体库；img里有显示上传状态的gif；项目中其他文件则是为了便于你查看demo后加入的。当然，这个插件依赖于jq，调用插件之前需要先引入jq。关于插件的使用，你可以参考下面的使用说明，也可以直接查看demo.html内的示例，这样你可以更快的搞明白
插件使用四步搞定：
- 定义一个结构用于放入插件
<div id="easyContainer"></div>- 引入easy-upload.css
<link rel="stylesheet" href="easy-upload.css">- 引入jq及easyUpload.js
<script src="vendor/jquery-1.12.4.min.js"></script>
<script src="easyUpload.js"></script>- 配置插件
$('#easyContainer').easyUpload({
allowFileTypes: '*.jpg;*.doc;*.pdf',//允许上传文件类型，格式'*.jpg;*.doc;*.pdf'
allowFileSize: 100000,//允许上传文件大小(KB)
selectText: '选择文件',//选择文件按钮文案
multi: true,//是否允许多文件上传
multiNum: 5,//多文件上传时允许的文件数
showNote: true,//是否展示文件上传说明
note: '提示：最多上传5个文件，支持格式为doc、pdf、jpg',//文件上传说明
showPreview: true,//是否显示文件预览
url: '/api/file/upload',//上传文件地址
fileName: 'file',//文件filename配置参数
formParam: {
token: $.cookie('token_cookie')//不需要验证token时可以去掉
},//文件filename以外的配置参数，格式：{key1:value1,key2:value2}
timeout: 10000,//请求超时时间
okCode: 200,//与后端返回数据code值一致时执行成功回调，不配置默认200
successFunc: function(res) {
console.log('成功回调', res);
},//上传成功回调函数
errorFunc: function(res) {
console.log('失败回调', res);
},//上传失败回调函数
deleteFunc: function(res) {
console.log('删除回调', res);
}//删除文件回调函数
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent