文件异步上传后路径回填表单
服务端可以是使用自己熟悉的语言写的客户端 或 其它第三方， 如: 七牛。
代码使用 JavaScript 编写，未使用 jQuery Zepto 等其它第三方的额 JS 库。
引入
<script src="ja.upload.js"></script>HTML 代码结构
<div class="form-group">
<label>图片</label>
<!-- 使用 data-upload 定义 配置 -->
<input type="text" class="form-control" data-upload='{"type":"image"}'/>
</div>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 只读 |
Yii2 框架使用 yiidoc/yii2-redactor 上传的配置
{
url: '*****', // 配置的 yii2-redactor 上传地址
value: 'filelink'
}使用 七牛 上传的配置
{
// 上传地址
url: 'https://up-z2.qiniu.com/',
// 表单附加数据 这里 用作 七牛认证
data: {
key: '{date}-{U}-{name}',
token: '' // 七牛 token
},
// 上传完成后返回数据的处理
value: function(a, d){
var _u = 'https://oo5fdwvf6.bkt.clouddn.com/'+a.key;
if(_img = d.parentNode.querySelector('img')){
_img.src = _u;
}
return _u;
}
});