1.0.0 • Published 6 years ago
@~banchen/yj-img-uploader v1.0.0
image uploder
图片上传组件
环境依赖
- jquery 1.10
- blueimp-file-upload 9.22
部署步骤
npm i @~banchen/img-uploader -S
初始化
单个初始化
<div id="uploader1" uploader-name="test1"></div>
new ImageUploader($('#uploader1'),opts)
批量初始化
<div class="uploader-img" uploader-name="test1"></div> <div class="uploader-img" uploader-name="test2"></div>
uploader-name 作为form表单名称
ImageUploader.init($('.uploader-img'),opts).forEach(uploader=>{ /*uploader.value='';*/ })
配置参数
- apiUrl: string // 上传服务端地址
- name?: string // 表单名称,优先使用html中的uploader-name
- accept?: string // input 的 accept默认为 image/png,image/jpg,image/jpeg
- extRegex?: RegExp // 后缀验证表达式 默认为 /((.jpg)|(.png)|(.jpeg)|(.bmp))$/i
- maxSize?: number // 文件最大尺寸 默认为不验证
- fileName?: string // 文件上传表单名称 默认为file
- readonly?:boolean // 只读 默认false
事件处理
- beforeEvent 上传前响应事件 如果设置将忽略 extRegex、maxSize配置
uploader.beforeEvent = (event) => { return true; };
事件绑定方法
- bindFailEvent 上传失败回调
uploader.bindFailEvent((event) => { event.selector.siblings('.uploader-tips').html(event.msg).show(); console.log(event); })
- bindSuccessEvent 上传成功回调
uploader.bindSuccessEvent((event) => { event.selector.siblings('.uploader-tips').html('').hide(); console.log(event); })
1.0.0
6 years ago