***七牛跨域上传图片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/
目录
相关文章
|
12天前
|
JSON JavaScript 前端开发
js跨域实现
【10月更文挑战第31天】在实际开发中,需要根据具体的需求和项目情况选择合适的跨域解决方案。
15 1
|
6月前
|
JavaScript
vue.js+ jquery上传图片并回显
vue.js+ jquery上传图片并回显
|
30天前
|
JavaScript 前端开发 开发工具
【Azure Developer】使用JavaScript通过SDK进行monitor-query的client认证报错问题
AADSTS90002: Tenant 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' not found. Check to make sure you have the correct tenant ID and are signing into the correct cloud. Check with your subscription administrator, this may happen if there are no active subscriptions for the tenant.
|
6月前
|
JSON JavaScript 前端开发
【JavaScript技术专栏】JavaScript的跨域通信方法
【4月更文挑战第30天】本文探讨了JavaScript中的跨域通信方法,包括:同源策略和跨域通信的概念,以及JSONP、CORS、WebSockets、`window.postMessage()`、代理服务器和WebAssembly的使用。这些技术各有优劣,适用于不同的场景,是Web开发者解决跨域问题的关键工具。随着Web技术的演进,跨域通信的解决方案也将不断更新。
137 0
|
4月前
|
文字识别 前端开发 Java
印刷文字识别使用问题之如何使用Python SDK来上传图片并获取识别结果
印刷文字识别产品,通常称为OCR(Optical Character Recognition)技术,是一种将图像中的印刷或手写文字转换为机器编码文本的过程。这项技术广泛应用于多个行业和场景中,显著提升文档处理、信息提取和数据录入的效率。以下是印刷文字识别产品的一些典型使用合集。
|
6月前
|
JavaScript 索引
用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值
用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值
用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值
|
4月前
|
JavaScript
JS【实战】跨域的网页链接跳转
JS【实战】跨域的网页链接跳转
59 0
|
4月前
|
前端开发 JavaScript API
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
51 0
|
6月前
|
JSON JavaScript 前端开发
vue2_vite.config.js的proxy跨域配置和nginx配置代理有啥区别?
vue2_vite.config.js的proxy跨域配置和nginx配置代理有啥区别?
219 1
|
JavaScript
js上传图片本地预览(整理)
js上传图片本地预览(整理)