weui uploader 上传组件的使用

首先下载  jquery.js   weui.js  weui.css

下载地址    : jquery就不说了

                      weui.js    https://res.wx.qq.com/open/libs/weuijs/1.1.3/weui.min.js

                      weui.css   https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css

      以上参考地址  https://github.com/Tencent/weui.js



以下是使用方法(参考 https://github.com/Tencent/weui.js/blob/master/docs/component/uploader.md

uploader(selector, options)

uploader 上传组件

Kind: global function

ParamTypeDefaultDescription
selectorstring 上传组件的selector
optionsobject 配置项
[options.url]string 上传的url,返回值需要使用json格式
[options.auto]booleantrue设置为true后,不需要手动调用上传,有文件选择即开始上传。用this.upload()来上传,详情请看example
[options.type]string"file"上传类型, file为文件上传; base64为以base64上传
[options.fileVal]string"file"文件上传域的name
[options.compress]object 压缩配置, false则不压缩
[options.compress.width]number1600图片的最大宽度
[options.compress.height]number1600图片的最大高度
[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; // 阻止默认行为,不使用默认的失败态
   }
});


评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

A黄俊辉A

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值