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

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; // 阻止默认行为，不使用默认的失败态
   }
});