@yjf/img-uploader v1.0.2

image uploder

图片上传组件

环境依赖

1. jquery 1.10
2. blueimp-file-upload 9.22

部署步骤

npm i @yjf/img-uploader -S

初始化

1. 单个初始化

   <div id="uploader1" uploader-name="test1"></div>

   new ImageUploader($('#uploader1'),opts)

2. 批量初始化

   <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='';*/
   })

配置参数

1. apiUrl: string // 上传服务端地址
2. name?: string // 表单名称，优先使用html中的uploader-name
3. accept?: string // input 的 accept默认为 image/png,image/jpg,image/jpeg
4. extRegex?: RegExp // 后缀验证表达式 默认为 /((.jpg)|(.png)|(.jpeg)|(.bmp))$/i
5. maxSize?: number // 文件最大尺寸 默认为不验证
6. fileName?: string // 文件上传表单名称 默认为file
7. readonly?:boolean // 只读 默认false

事件处理

1. beforeEvent 上传前响应事件 如果设置将忽略 extRegex、maxSize配置

   uploader.beforeEvent = (event) => { 
       return true;
   };

事件绑定方法

1. bindFailEvent 上传失败回调

   uploader.bindFailEvent((event) => {
       event.selector.siblings('.uploader-tips').html(event.msg).show();
       console.log(event);
   })

2. bindSuccessEvent 上传成功回调

   uploader.bindSuccessEvent((event) => {
       event.selector.siblings('.uploader-tips').html('').hide();
       console.log(event);
   })