***七牛跨域上传图片JS SDK

简介: SDK: http://developer.qiniu.com/code/v6/sdk/javascript.html#upload   上传 在页面中引入 plupload,plupload.
+关注继续查看

 

SDK:

http://developer.qiniu.com/code/v6/sdk/javascript.html#upload

 

上传

  • 在页面中引入 plupload,plupload.full.min.js(产品环境)或引入 plupload.dev.js 和 moxie.js(开发调试)

  • 在页面中引入 qiniu.min.js(生产环境)或 qiniu.js(开发调试)

  • 初始化 uploader (请确保在执行初始化时,页面已经引入 plupload):

    var uploader = Qiniu.uploader({
        runtimes: 'html5,flash,html4',      // 上传模式,依次退化
        browse_button: 'pickfiles',         // 上传选择的点选按钮,必需
        // 在初始化时,uptoken,uptoken_url,uptoken_func三个参数中必须有一个被设置
        // 切如果提供了多个,其优先级为uptoken > uptoken_url > uptoken_func
        // 其中uptoken是直接提供上传凭证,uptoken_url是提供了获取上传凭证的地址,如果需要定制获取uptoken的过程则可以设置uptoken_func
        // uptoken : '<Your upload token>', // uptoken是上传凭证,由其他程序生成
        // uptoken_url: '/uptoken',         // Ajax请求uptoken的Url,强烈建议设置(服务端提供)
        // uptoken_func: function(file){    // 在需要获取uptoken时,该方法会被调用
        //    // do something
        //    return uptoken;
        // },
        get_new_uptoken: false,             // 设置上传文件的时候是否每次都重新获取新的uptoken
        // downtoken_url: '/downtoken',
        // Ajax请求downToken的Url,私有空间时使用,JS-SDK将向该地址POST文件的key和domain,服务端返回的JSON必须包含url字段,url值为该文件的下载地址
        // unique_names: true,              // 默认false,key为文件名。若开启该选项,JS-SDK会为每个文件自动生成key(文件名)
        // save_key: true,                  // 默认false。若在服务端生成uptoken的上传策略中指定了sava_key,则开启,SDK在前端将不对key进行任何处理
        domain: '<Your bucket domain>',     // bucket域名,下载资源时用到,必需
        container: 'container',             // 上传区域DOM ID,默认是browser_button的父元素
        max_file_size: '100mb',             // 最大文件体积限制
        flash_swf_url: 'path/of/plupload/Moxie.swf',  //引入flash,相对路径
        max_retries: 3,                     // 上传失败最大重试次数
        dragdrop: true,                     // 开启可拖曳上传
        drop_element: 'container',          // 拖曳上传区域元素的ID,拖曳文件或文件夹后可触发上传
        chunk_size: '4mb',                  // 分块上传时,每块的体积
        auto_start: true,                   // 选择文件后自动上传,若关闭需要自己绑定事件触发上传
        //x_vars : {
        //    查看自定义变量
        //    'time' : function(up,file) {
        //        var time = (new Date()).getTime();
                  // do something with 'time'
        //        return time;
        //    },
        //    'size' : function(up,file) {
        //        var size = file.size;
                  // do something with 'size'
        //        return size;
        //    }
        //},
        init: {
            'FilesAdded': function(up, files) {
                plupload.each(files, function(file) {
                    // 文件添加进队列后,处理相关的事情
                });
            },
            'BeforeUpload': function(up, file) {
                   // 每个文件上传前,处理相关的事情
            },
            'UploadProgress': function(up, file) {
                   // 每个文件上传时,处理相关的事情
            },
            'FileUploaded': function(up, file, info) {
                   // 每个文件上传成功后,处理相关的事情
                   // 其中info是文件上传成功后,服务端返回的json,形式如:
                   // {
                   //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
                   //    "key": "gogopher.jpg"
                   //  }
                   // 查看简单反馈
                   // var domain = up.getOption('domain');
                   // var res = parseJSON(info);
                   // var sourceLink = domain +"/"+ res.key; 获取上传成功后的文件的Url
            },
            'Error': function(up, err, errTip) {
                   //上传出错时,处理相关的事情
            },
            'UploadComplete': function() {
                   //队列文件处理完毕后,处理相关的事情
            },
            'Key': function(up, file) {
                // 若想在前端对每个文件的key进行个性化处理,可以配置该函数
                // 该配置必须要在unique_names: false,save_key: false时才生效
    
                var key = "";
                // do something with key here
                return key
            }
        }
    });
    
    // domain为七牛空间对应的域名,选择某个空间后,可通过 空间设置->基本设置->域名设置 查看获取
    
    // uploader为一个plupload对象,继承了所有plupload的方法
    
  • 如果一个页面中有多个上传实例,可以按如下操作:

    var option1 = {
        key : val ,
        ……
    };
    var uploader = Qiniu.uploader(option1);
    
    var Qiniu2 = new QiniuJsSDK();
    var option2 = {
        key : val ,
        ……
    };
    var uploader2 = Qiniu2.uploader(option2);
    
    

 

如何联系我:【万里虎】www.bravetiger.cn 【QQ】3396726884 (咨询问题100元起,帮助解决问题500元起) 【博客】http://www.cnblogs.com/kenshinobiy/
目录
相关文章
|
传感器 监控 JavaScript
NodeJS & Dapr Javascript SDK 官方使用指南
用于在 JavaScript 和 TypeScript 中构建 Dapr 应用程序的客户端库。该客户端抽象了公共 Dapr API,例如服务到服务调用、状态管理、发布/订阅、机密等,并为构建应用程序提供了一个简单、直观的 API。
286 0
NodeJS & Dapr Javascript SDK 官方使用指南
|
边缘计算 开发框架 JavaScript
使用 Dapr JS SDK 让 Nest.js 集成 Dapr
Dapr 是一个可移植的、事件驱动的运行时,它使任何开发人员能够轻松构建出弹性的、无状态和有状态的应用程序,并可运行在云平台或边缘计算中,它同时也支持多种编程语言和开发框架。
237 0
使用 Dapr JS SDK 让 Nest.js 集成 Dapr
|
JavaScript 前端开发 测试技术
Sentry 开发者贡献指南 - JavaScript SDK Minimal
Sentry 开发者贡献指南 - JavaScript SDK Minimal
|
资源调度 监控 JavaScript
Sentry 官方 JavaScript SDK 简介与调试指南
Sentry 官方 JavaScript SDK 简介与调试指南
344 0
Sentry 官方 JavaScript SDK 简介与调试指南
|
Kubernetes JavaScript 前端开发
Sentry(v20.12.1) K8S 云原生架构探索,SENTRY FOR JAVASCRIPT SDK 配置详解(二)
Sentry(v20.12.1) K8S 云原生架构探索,SENTRY FOR JAVASCRIPT SDK 配置详解(二)
217 0
|
存储 Web App开发 Kubernetes
Sentry(v20.12.1) K8S 云原生架构探索,SENTRY FOR JAVASCRIPT SDK 配置详解(一)
Sentry(v20.12.1) K8S 云原生架构探索,SENTRY FOR JAVASCRIPT SDK 配置详解(一)
301 0
|
缓存 Kubernetes 监控
Sentry(v20.12.1) K8S 云原生架构探索,Sentry JavaScript SDK 三种安装加载方式
Sentry(v20.12.1) K8S 云原生架构探索,Sentry JavaScript SDK 三种安装加载方式
521 0
Sentry(v20.12.1) K8S 云原生架构探索,Sentry JavaScript SDK 三种安装加载方式
|
JavaScript 前端开发 Cloud Native
SAP Cloud SDK for JavaScript 概述
SAP Cloud SDK for JavaScript 概述
SAP Cloud SDK for JavaScript 概述
|
前端开发 JavaScript API
SAP Cloud SDK for JavaScript 的搭建和使用方法介绍
SAP Cloud SDK for JavaScript 的搭建和使用方法介绍
SAP Cloud SDK for JavaScript 的搭建和使用方法介绍
|
JavaScript 前端开发 API
SAP Cloud SDK for JavaScript 的搭建和使用方法介绍
官方链接 要创建已包含使用 SAP Cloud SDK for JavaScript 所需的所有文件和配置的应用程序,您可以使用 SDK 的命令行界面 (CLI)。 要获取 CLI,请运行以下命令: npm install -g @sap-cloud-sdk/cli
SAP Cloud SDK for JavaScript 的搭建和使用方法介绍
相关产品
云迁移中心
推荐文章
更多