【第三方】七牛JS SDK拔草

七牛jssdk使用方法先简单介绍jssdk的使用方法：(官方教程参考：http://developer.qiniu.com/docs/v6/sdk/javascript-sdk.html)

让你的后端帮你生成token上传凭证引入plupload.js(七牛sdk强依赖，用于处理文件上传，官网戳我)、qiniu.js(七牛sdk)注：plupload.js在不同环境中需要引入的文件不同，正式环境：plupload.full.min.js,plupload.dev.js+moxie.js页面中进行类似如下引用即可varuploader=qiniu.uploader({runtimes:'html5,html4',//上传模式,依次退化browse_button:'j_avatarpickfile',//上传选择的点选按钮domid，**必需**//uptoken_url:'http://api.shanyue8.com/app/qiniu_upload_token',//ajax请求uptoken的url，**强烈建议设置**(服务端提供)uptoken:uptoken,domain:'http://***.qiniucdn.com/',//bucket域名，下载资源时用到，**必需**get_new_uptoken:false,//设置上传文件的时候是否每次都重新获取新的tokencontainer:'j_avatarcontainer',//上传区域domid，默认是browser_button的父元素，max_file_size:'100mb',//最大文件体积限制max_retries:3,//上传失败最大重试次数dragdrop:true,//开启可拖曳上传drop_element:'container',//拖曳上传区域元素的id，拖曳文件或文件夹后可触发上传chunk_size:'4mb',//分块上传时，每片的体积auto_start:true,//选择文件后自动上传，若关闭需要自己绑定事件触发上传init:{'filesadded':function(up,files){plupload.each(files,function(file){//文件添加进队列后,处理相关的事情});},'beforeupload':function(up,file){},'uploadprogress':function(up,file){},//每个文件上传中,处理相关的事情'fileuploaded':function(up,err,info){},//info：七牛返回信息'error':function(up,err,errtip){},//上传出错时,处理相关的事情'uploadcomplete':function(){},//队列文件处理完毕后,处理相关的事情'key':function(up,file){varkey=tool.getguid()+"."+file.type.split("/")[1];//本人拙劣的自己写的生成guid的方法returnkey;//若想在前端对每个文件的key进行个性化处理，可以配置该函数//该配置必须要在unique_names:false,save_key:false时才生效}}});4、页面结构5、在线上测试踩过的那些坑一、token凭证问题图片上传需要token，不要问我如何生成token，请自行查看(点我点我)。生成token需要accesskey和secretkey，这种私密性强的数据自然不应该在前端暴露。所以，凭证必须由后端生成。好吧，我承认尝试过在前端生成(因为羞射不好意思找后端让帮忙啊)，但是，没有提供生成的sdk啊，有php款式，有node款式，偏偏没有前端款。我是不会算法的，所以看不懂那复杂的凭证生成算法。于是想到去七牛的凭证生成器扒凭证生成算法，算了，说多了都是泪，显然没成功。此处浪费时间两天。所以，沟通很重要沟通很重要沟通真的真的很重要。重要的话说三遍...二、图片多选问题在属性配置中增加下列属性：multi_selection：true;//false：单选;true：多选更多属性参见plupload的配置。三、配置上传文件的key值先来两张图感受下：手机版pc版为什么我要发两个版本的截图，就是为了告诉大家，这个我花了两天才爬出来的坑长啥样子。key是你所上传的文件在七牛云中的标示符，如果你不对key进行改造(譬如我整了一个32位数的guid)，那么，文件名很可能重复。然后会报错，提示请参考上面“手机版”截图。pc中图片名称我就不多说，爱存咋存。关键是手机上，我用的iphone，没想到图片的名称竟然全部都是“image.jpeg”(七牛获取的，待我测一下原生js获取的文件name)。我特么也是醉了，以前怎么没发现啊。不管怎样，总之，在使用七牛的sdk时，如果不对key进行改造，根本无法在iphone上运行。我多么多么希望早点有人提示我，因为我特么压根没想这上面去，好吧，我的习惯是，一看到报错提示第一反应就是“我肯定又哪里搞错了”。算了，不扯犊子了。记得改造key，记得改造key，记得改造key。改造方法很简单，配置参数“key”就行了。具体参见顶部代码。四、上传选择的点选按钮不能隐藏，只要是包含它的父层也不能隐藏，否则在iphone中无法使用界面效果图观察界面图，很容易发现，上传图片这个功能包含在一个向右滑出的层内。假设，这个层为#slide，上传图片点选按钮为#pickfiles。其中，#slide的样式继承了如下两条。{display:none;-webkit-transform:translatex(-100%);}问题出现了。我在pc的chrome和safari中测试均可用，在android4.0+手机浏览器中可用(我用note2测试，uc不可用，原生浏览器可用，产品用小米测试可用，没问他什么浏览器)，氮素，iphone不可用啊，不可用啊，谁能告诉我原因?我到现在为止也不知道原因。魂淡啊魂淡!我说了，我第一反应就是我的没有在js文件头部加上usestrict;所以我写的那种没组织没纪律性的代码出了这种奇葩问题。于是，我开始定位问题。还好，这个功能所在js文件只有500多行，function也不多，十来个。呵呵哒，折腾了一晚上也没见到效果。最后，我使出绝招，把所有功能都屏蔽，把页面中其他元素都屏蔽让上传按钮直接裸露出来，测试页面一做出来，特么能用了!!!于是，灵光一闪，莫非跟元素被隐藏有关。去掉#slide上的hidecss类之后，居然真的可用了!!!天啊，我以为是js的问题，没想到只有一个小小的css的问题，更没想到这个小小的问题，竟然折磨了我一天一夜，害我昨天晚上做梦梦见自己在发版本，产品突然问我“bug改好了吗?”然后，我特么就被吓醒了。所以，请记住，一定不要隐藏上传按钮(我没试过，你可以试试)，或者上传按钮的包裹层。五、坑爹的up.getoption我真是醉醉的啊，先复原问题：1、说明，up.getoption()是用来获取我们传递的参数的接口：console.info("up.getoption('container'):");console.info(up.getoption('container'));console.info("up.getoption('browse_button'):");console.info(up.getoption('browse_button'));下面是控制台打印结果：2、你一定想知道这两个参数有什么不一样，好吧，请看下图：总结：传入其中的两个参数都是domid，结果用它获取参数的方法，得到的结果竟然一个是domid，一个竟然是domobjectarray。容我哭一会去，我不管你内部如何在牛b的运作着神秘的代码，但是，可以不要挖这样的坑给使用者吗?web前端第三方插件的使用史就是血泪史啊，什么时候前端规范才能统一呢?也需要等到我转行之后，心塞塞。六、改造上传input，限制只上传图片改造前：(我把style清空了)改造后：js：(上下文已省略)//改造上传按钮,只传图片pt._resetfileinput=function(fileinput){//添加只能上传图片的限制(移动端定制)fileinput.setattribute('capture','camera');fileinput.setattribute('accept','image/*');}后语