东方网升 jquery 版本上传组件
发布
更改package.json版本yarn run build-
npm publish注：镜像源需切换回NPM官方源
链接
示例
yarnyarn start
使用之前
该组件依赖于jQuery,plupload，使用之前请配置jQuery,plupload。 大文件上传依托于aliyun-oss-sdk 请自行配置
何时使用
- 需要oss文件上传。
API
<script src="dist/dfws.crypto.min.js"></script>
<script src="dist/jquery.upload.js"></script>// 需要大文件上传时
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.10.0.min.js"></script>
<script src="dist/dfws.crypto.min.js"></script>
<script src="dist/multi.upload.js"></script>var upload = $.ossUpload({
url: 'oss',
browse_button: 'upload',
format: 'jpg,png',
maxSize: '4',
drop_element: 'drop',
success: function (fileArray) {
var html = ''
for (var i = 0; i < fileArray.length; i++) {
html += "<img src=" + fileArray[i].url + " />"
}
$('#preview').append(html)
},
error: function (err) {
console.log(err)
},
tipsFun: function (err) {
alert(err.msg)
},
progress: function (uploader, file) {
console.log(uploader.files)
console.log(file.percent)
}
})
var multipartUpload = $.multipartUpload({
url:'oss',
maxSize:'500',
format:'mp4',
success:function(res){
console.log(res)
},
dom:'upload_oss',
progress:function(res){
console.log(res)
},
tipsFun:function(res){
alert(res.msg)
}
})
$('.oss_btn').on('click',function(){
multipartUpload()
})upload props
通常上传
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| url | 获取oss数据的接口 | string | - |
| browse_button | 触发文件选择对话框的DOM元素，当点击该元素后便后弹出文件选择对话框 | string or DOM | oss_${new Date().getTime()} |
| success | 上传成功后的回调函数 返回数组 [{file:文件信息,url:上传完成后的路径}] | function | - |
| error | 上传失败后的回调函数 返回数组[]err信息 | function | - |
| tipsFun | 选择文件不符合限制的回调函数 返回 {type:1,msg:'格式错误'} {type:2,msg:'大小错误'} | function | - |
| fileAdd | 选择文件后手动操作文件的回调函数 返回[] 选择的文件组 需要与isStart并用 | function | - |
| progress | 上传时的回调函数 返回uploader,file uploader为当前的plupload实例对象，file为触发此事件的文件对象 | function | - |
| multi_selection | 是否多选 | boolean | true |
| isStart | 是否选择完文件后自动上传 | boolean | true |
| maxSize | 文件最大限制 单位M | number | - |
| format | 可选的文件格式 以逗号分割 | string | - |
| container | 上传的容器 | string or DOM | - |
| drop_element | 指定了使用拖拽方式来选择上传文件时的拖拽区域 | string or DOM | - |
大文件上传
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| url | 获取oss数据的接口 | string | - |
| dom | 保存文件对象的dom | string | |
| file | 文件对象 | File | |
| success | 上传成功后的回调函数 返回文件地址 | function | - |
| tipsFun | 选择文件不符合限制的回调函数 返回 {type:1,msg:'格式错误'} {type:2,msg:'大小错误'} | function | - |
| progress | 上传时的回调函数 返回进度 | function | - |
| maxSize | 文件最大限制 单位M | number | - |
| format | 可选的文件格式 以逗号分割 | string | - |
返回值
通常上传
uploader实例对象 start()启动上传 addUploadFile(file) 添加文件进入上传队列（操作文件后使用）
大文件上传
uploader实例对象 直接启动上传