【工作】工作中常用插件、技巧集合
【制作隐藏上传文件按钮】
1.利用html5 file API接口实现本地图片预览：（遗憾的是浏览器未必都支持）
手机浏览器支持情况：http://my.oschina.net/maomi/blog/131230
w3c规范地址： http://www.w3.org/TR/2009/WD-FileAPI-20091117/
<div><input id="viewFiles" type="file"/></div>
<img id="viewImg" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA
7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" style="max-width:500px"/>
<script type="text/javascript">
(function () {
var viewFiles = document.getElementById("viewFiles");
var viewImg = document.getElementById("viewImg");
function viewFile (file) {
//通过file.size可以取得图片大小
var reader = new FileReader();
reader.onload = function( evt ){
viewImg.src = evt.target.result;
}
reader.readAsDataURL(file);
}
viewFiles.addEventListener("change", function () {
//通过 this.files 取到 FileList ，这里只有一个
viewFile(this.files[0]);
}, false);
})();
</script>
2.利用隐藏的iframe
<form method="POST" enctype="multipart/form-data" target="ifr_picup" name="add_photo" action="iframe.html"> <input type="file" tab="0" size="1" hidefocus="true" name="image" class="add_photo"> <img src="img/button-up.png" data-role="button" class="btn_upPhoto"> </form> <div style="display: none;"><iframe frameborder="0" name="ifr_picup" id="ifr_picup" src="about:blank"></iframe></div>
style：
.add_photo {
border: 0 none;
cursor: pointer;
height: 100%;
left: 22%;
opacity: 0;
position: absolute;
width: 58%;
z-index: 1;
}
.share_box .content_wrap [data-role="button"] {
width: 58%;
}
.share_box .content_wrap #up_photo p {
line-height: 2.4em;
position: relative;
text-align: center;
}
iframe.html
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
if (window.parent){
document.domain = window.parent.App.addPhoto.showPhoto.call(window.parent,true,'http://s1.juancdn.com/bao/130515/t/r/51938ae79e7dd_1024x768.jpg');
}
</script>
</body>
</html>
【回到顶部】
【UMA平台微博分享+@三位好友】
AS.active.weibo = {
umaid : "",
uid : "",
shareContent : "",
getActiveFans : function(){
var that = AS.active.weibo;
var params = {
uid: that.uid,
count: 200
};
umaWeibo.callback = "AS.active.weibo.activeFansCallback";
umaWeibo.get(that.umaid, 'friendships/followers/active', params);
},
activeFansCallback : function(data){
var that = AS.active.weibo;
var username = [];
if (data.users){
var users = data.users;
var minNum = 3;
var usernameNum = users.length <= minNum ? 0 : Math.floor(Math.random() * users.length);
usernameNum && usernameNum > (users.length - minNum) && (usernameNum = users.length - minNum);
for (var i=0; i < minNum ; i++){
users[usernameNum + i] && users[usernameNum + i].name && username.push(users[usernameNum + i].name);
}
}
that.shareWeibo(username);
},
getShareInfo : function(){
var that = this;
var text = "",picsrc = "";
var link = location.href;
link.indexOf("?") != -1 && (link = link.split("?")[0]);
switch(that.shareContent){
case "active1" : text += '*******' + $("#topPic_picBox1 img").attr("alt") + '真的不错吆！，{fansName}你也来瞧瞧吧！' + link;
picsrc += link.split("/")[0] + $("#topPic_picBox1 img").attr("src"); break;
}
picsrc = "http://www.allsun-sh.com/Content/base/images/active/top-pic1.jpg";
return {
text : text,
picsrc : picsrc
};
},
shareWeibo : function(username){
var that = AS.active.weibo;
var fansName = "";
for (var i=0; i < username.length; i++){
fansName += " @" + username[i] + " ";
}
var text = that.getShareInfo().text;
var picsrc = that.getShareInfo().picsrc;
that.shareInfo(text,picsrc,fansName);
},
shareInfo : function(text,picsrc,fansName){
var that = AS.active.weibo;
var _data = new Date();
var _fansName = fansName || "";
var _text = text.replace("{fansName}",_fansName) + "?t=" + _data.getTime();
var _picsrc = picsrc;
var params = {
status:encodeURIComponent(_text),
pic:'@' + _picsrc
};
// console.info("fansName : " + fansName);
// console.info(params);
// console.info("that.umaid : " + that.umaid);
umaWeibo.callback = function(){};
umaWeibo.post(that.umaid,'statuses/upload',params,1);
alert("分享成功！(*^__^*) ……");
}
};
调用示范：
shareInfo : function(){
var href = location.href;
var umaKey = '50de96342e4690161a005858';
var weibo = AS.active.weibo;
var callback = function(){
// 此处获取产品分享内容的cookie，如果为空则不分享
if(href.indexOf("umaId") != -1 && href.indexOf("uid") != -1){
weibo.uid = href.split("&uid=")[1];
weibo.umaid = href.split("&uid=")[0].split("umaId=")[1];
weibo.shareContent = "active1";
weibo.getActiveFans.call(weibo);
}
};
callback();
$(".icon_sina").live("click",function(){
// 此处修改产品分享内容的cookie
if (href.indexOf("umaId") == -1 && href.indexOf("uid") == -1){
umaWeibo.getAuthorizeURL(href,umaKey);
}else{
callback();
}
});
},