HTML5   发布时间:2022-04-25  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Hbuilder开发app实战-识岁03-文件上传大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

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

@H_489_6@

@H_489_6@Uploader

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

@H_489_6@通过pluS.Uploader可获取上传管理对象。

@H_489_6@Uploader上传使用http的POST方式提交数据,数据格式符合Multipart/form-data规范,即rfc1867(Form-based File Upload in HTML)协议。

@H_489_6@更多内容Uploader

@H_489_6@

代码

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();
    }
};
@H_489_6@对uploader的上传做了封装,

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

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

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

@H_489_6@最后执行start方法开始上传

@H_489_6@

识岁

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

@H_489_6@代码如下:

// 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('请先选择要识别的照片!');
    }
}
@H_489_6@为了防止每次点击都上传照片,所以做了一个判断,如果app中的照片src没有变化就不上传了,

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

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

@H_489_6@

更多教程:

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

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

@H_404_69@

大佬总结

以上是大佬教程为你收集整理的Hbuilder开发app实战-识岁03-文件上传全部内容,希望文章能够帮你解决Hbuilder开发app实战-识岁03-文件上传所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。