博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
***七牛跨域上传图片JS SDK
阅读量:6282 次
发布时间:2019-06-22

本文共 2987 字,大约阅读时间需要 9 分钟。

 

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 : '
    ', // 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: '
    ', // 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);

 

转载于:https://www.cnblogs.com/kenshinobiy/p/6265191.html

你可能感兴趣的文章
c# webbrowser 实现淘宝天猫链接转为淘宝客链接 有源码
查看>>
CentOS Rsync服务端与Windows cwRsync客户端实现数据同步
查看>>
ASM:ORA-15063 错误处理方法一则
查看>>
什么是Oracle高水位线?"high water mark"或HWM详解
查看>>
详解网络传输中的三张表,MAC地址表、ARP缓存表以及路由表
查看>>
android activity ImageView全屏设置
查看>>
linux java 定时任务
查看>>
Linux守护进程(init.d和xinetd)
查看>>
不能连接MS Sql Server2008数据库的问题
查看>>
nagios监控内存
查看>>
用python操作mysql数据库(之数据查询结果返回字典类型)
查看>>
DAY05 WINDOWS 打印机的设置以及磁盘管理
查看>>
那些打动人心的用户体验细节分享
查看>>
备考中
查看>>
Java高级应用
查看>>
bootstrap-进度条
查看>>
在Linux上创建和运行SQL Server 2017代理作业
查看>>
并发学习心得
查看>>
find、xargs命令使用及方法详解
查看>>
系统提示硬盘不够用的处理方法
查看>>