JS 通用异步上传插件

2017-4-10 简爱

# jaUpload
文件异步上传后路径回填表单
服务端可以是使用自己熟悉的语言写的客户端或其它第三方，如: 七牛。
代码使用 `JavaScript` 编写，未使用 `jQuery` `Zepto` 等其它第三方的额 JS 库。

### [七牛上传 DEMO](http://cdn.asilu.com/demo/js/ja.upload.html)
## 使用
引入
```html

````
HTML 代码结构
```html

图片

````
JS 调用代码
```js
jaUpload('.form-control', {/* 公用配置会被 input data-upload 覆盖 */});
```
## 可用参数
| 名称 | 类型 | 默认值 | 描述
| ---- | ---- | ------ | ----
| name | string | 'file' | 后台接收文件上传代码的文件字段名称
| url | string | `''` | 文件上传路径，默认空当前网址
| type | bool string | false | 文件类型可填 `'image'`
| btn_name | string | '上传文件' | 按钮显示的文字
| btn_uploading | string | '上传 ...' | 上传中按钮显示的文字
| btn_class | string | 'btn btn-sm btn-success' | 按钮 class
| value | function bool string | false | 默认 false 直接填入上传文件后的返回值，可以是返回值的键名如: `file.path` 代表返回数据的 `r['file']['path']`，也可以是处理函数
| max_size | number | 1024 * 1024 * 2 | 文件大小限制
| data | object | {} | 附加数据字段可以使用 {date} {time} {U} {name} {size} 代表变量
| bottom | number | 0 | 按钮定位
| right | number | 0 | 按钮定位
| margin | number | 0 | 边距
| readonly | bool | true | 是否设定 input 只读
## DEMO
Yii2 框架使用 yiidoc/yii2-redactor 上传的配置
```js
{
url: '*****', // 配置的 yii2-redactor 上传地址
value: 'filelink'
}
```
使用七牛上传的配置
```js
{
// 上传地址
url: 'http://up-z2.qiniu.com/',
// 表单附加数据这里用作七牛认证
data: {
key: '{date}-{U}-{name}',
token: '' // 七牛 token
},
// 上传完成后返回数据的处理
value: function(a, d){
var _u = 'http://oo5fdwvf6.bkt.clouddn.com/'+a.key;
if(_img = d.parentNode.querySelector('img')){
_img.src = _u;
}
return _u;
}
});
```

评论：

起点终站

2017-04-18 15:06 回复

学习了