Hbuilder开发app实战-识岁03-文件上传

前言

做app不得不谈的问题就是文件上传，用hbuilder开发app让上传变的很简单。

Uploader

Uploader模块管理网络上传任务，用于从本地上传各种文件到服务器，并支持跨域访问操作。

通过plus.uploader可获取上传管理对象。

Uploader上传使用HTTP的POST方式提交数据，数据格式符合Multipart/form-data规范，即rfc1867（Form-based File Upload in HTML）协议。

更多内容：Uploader

代码

qiao.h.upload = function(options){    if(!options) return;        var url = options.url;    var filepath = options.filepath;    var datas = options.datas || [];    var success = options.success;    var fail = options.fail;    if(url && filepath){        var task = plus.uploader.createUpload(url, {                method: "POST",                blocksize: 204800,                priority: 100            },            function(t, status){                if(status == 200){                    if(success) success(t);                }else{                    if(fail) fail(status);                }            }        );        task.addFile(filepath, {key: 'file'});        if(datas && datas.length){            for(var i=0; i<datas.length; i++){                var data = datas[i];                task.addData(data.key, data.value);            }        }        task.start();    }};

对uploader的上传做了封装，

可以看到其核心是一个createUpload方法，创建一个Uploader对象，

创建这个对象的时候，会写好成功和失败的回调函数。

创建成功后为这个upload对象添加数据，包括要上传的文件和其他数据，

最后执行start方法开始上传。

识岁

在本zpp中，当用户选择相片或者拍照生成相片后，只要点击“开始识别”按钮，就会执行上传操作，

代码如下：

// uploadImgvar url,tsrc;function uploadImg(){    var src = $('#faceImg').attr('src');    if(src){        beginw();                if(tsrc && tsrc == src && url){            facepp();        }else{            tsrc = src;            var token = qiao.qiniu.uptoken(src);            var filename = qiao.qiniu.file;            qiao.h.upload({                url: 'http://upload.qiniu.com/',                filepath: src,                datas: [                    {key: 'key', value : filename},                    {key: 'token', value : token}                ],                success: function(){                    url = qiao.qiniu.url();                    facepp();                },                fail: function(s){                    showRes('上传文件失败：' + s);                }            });        }    }else{        showRes('请先选择要识别的照片！');    }}

为了防止每次点击都上传照片，所以做了一个判断，如果app中的照片src没有变化就不上传了，

否则则用封装好的qiao.h.upload进行上传。

如果上传失败则给与提示，上传成功则进行图片识别。

更多教程：

Hbuilder开发App实战1-识岁：http://uikoo9.com/book/detail/5

更多学习笔记：http://uikoo9.com/book