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

Posted liguangsunls

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Hbuilder开发app实战-识岁03-文件上传相关的知识,希望对你有一定的参考价值。

前言

做app不得不谈的问题就是文件上传。用hbuilder开发app让上传变的非常easy。


Uploader

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

通过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中。当用户选择相片或者拍照生成相片后。仅仅要点击“開始识别”button,就会运行上传操作,

代码例如以下:

// uploadImg
var 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







以上是关于Hbuilder开发app实战-识岁03-文件上传的主要内容,如果未能解决你的问题,请参考以下文章

Hbuilder开发app实战-识岁06-face++的js实现完结

HBuilder开发App教程06-首页

HBuilder开发App教程03-定制图标,启动页以及打包

hbuilder打包ios怎么安装失败怎么回事?

HBuilder开发移动App——manifest.json文件解析

Hbuilder开发app时生成ios要的mobileprovision和p12文件步骤.