dfws-jq-upload

东方网升 jquery 版本上传组件

发布

1. 更改package.json版本
2. yarn run build
3. npm publish 注：镜像源需切换回NPM官方源

链接

• 更新日志

示例

• yarn
• yarn 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实例对象 直接启动上传

参考文档

pluload