Hbuilder開發app實戰-識歲03-檔案上傳

標籤：show   tip   lock   www.   doc   實戰   var   ase   star   

前言

做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，就會運行上傳操作，

代碼例如以下：

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

Hbuilder開發app實戰-識歲03-檔案上傳