1. 首页
  2. 文档
  3. WeUI.js文档
  4. 上传组件(uploader)

上传组件(uploader)

上传组件

uploader(selector, options)

Kind: global function

Param Type Default Description
selector string 上传组件的selector
options object 配置项
[options.url] string 上传的url,返回值需要使用json格式
[options.auto] boolean true 设置为true后,不需要手动调用上传,有文件选择即开始上传。用this.upload()来上传,详情请看example
[options.type] string "file" 上传类型, file为文件上传; base64为以base64上传
[options.fileVal] string "file" 文件上传域的name
[options.compress] object 压缩配置, false则不压缩
[options.compress.width] number 1600 图片的最大宽度
[options.compress.height] number 1600 图片的最大高度
[options.compress.quality] number .8 压缩质量, 取值范围 0 ~ 1
[options.onBeforeQueued] function 文件添加前的回调,return false则不添加
[options.onQueued] function 文件添加成功的回调
[options.onBeforeSend] function 文件上传前调用,具体参数看example
[options.onSuccess] function 上传成功的回调
[options.onProgress] function 上传进度的回调
[options.onError] function 上传失败的回调

Example

html

 <div class="weui-cells weui-cells_form" id="uploader">
     <div class="weui-cell">
         <div class="weui-cell__bd">
             <div class="weui-uploader">
                 <div class="weui-uploader__hd">
                     <p class="weui-uploader__title">图片上传</p>
                     <div class="weui-uploader__info"><span id="uploadCount">0</span>/5</div>
                 </div>
                 <div class="weui-uploader__bd">
                     <ul class="weui-uploader__files" id="uploaderFiles"></ul>
                     <div class="weui-uploader__input-box">
                         <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" capture="camera" multiple="" />
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </div>

js

var uploadCount = 0;
weui.uploader('#uploader', {
   url: 'http://localhost:8081',
   auto: true,
   type: 'file',
   fileVal: 'fileVal',
   compress: {
       width: 1600,
       height: 1600,
       quality: .8
   },
   onBeforeQueued: function(files) {
       // `this` 是轮询到的文件, `files` 是所有文件

       if(["image/jpg", "image/jpeg", "image/png", "image/gif"].indexOf(this.type) < 0){
           weui.alert('请上传图片');
           return false; // 阻止文件添加
       }
       if(this.size > 10 * 1024 * 1024){
           weui.alert('请上传不超过10M的图片');
           return false;
       }
       if (files.length > 5) { // 防止一下子选择过多文件
           weui.alert('最多只能上传5张图片,请重新选择');
           return false;
       }
       if (uploadCount + 1 > 5) {
           weui.alert('最多只能上传5张图片');
           return false;
       }

       ++uploadCount;

       // return true; // 阻止默认行为,不插入预览图的框架
   },
   onQueued: function(){
       console.log(this);

       // console.log(this.status); // 文件的状态:'ready', 'progress', 'success', 'fail'
       // console.log(this.base64); // 如果是base64上传,file.base64可以获得文件的base64

       // this.upload(); // 如果是手动上传,这里可以通过调用upload来实现;也可以用它来实现重传。
       // this.stop(); // 中断上传

       // return true; // 阻止默认行为,不显示预览图的图像
   },
   onBeforeSend: function(data, headers){
       console.log(this, data, headers);
       // $.extend(data, { test: 1 }); // 可以扩展此对象来控制上传参数
       // $.extend(headers, { Origin: 'http://127.0.0.1' }); // 可以扩展此对象来控制上传头部

       // return false; // 阻止文件上传
   },
   onProgress: function(procent){
       console.log(this, procent);
       // return true; // 阻止默认行为,不使用默认的进度显示
   },
   onSuccess: function (ret) {
       console.log(this, ret);
       // return true; // 阻止默认行为,不使用默认的成功态
   },
   onError: function(err){
       console.log(this, err);
       // return true; // 阻止默认行为,不使用默认的失败态
   }
});


发表评论

电子邮件地址不会被公开。 必填项已用*标注