使用一个稳定的图床对于一般的博客站的好处是不言而喻的,而新浪也算是比较稳定,使用起来也相对放心些。不白话了,下面直接说“wordpress纯代码实现微博图床(将图片上传到新浪微博)”怎么实现。
下面上一张wordpress纯代码实现微博图床(将图片上传到新浪微博)实现的效果图。
js代码
将以下js代码打包好调用,也可以用西安SEO博主打包好的的“http://pic.wosn.net/blog/170917/7HBc4H86La.js"。
- var
- UP=function(o,success,error,upload,x,file,A){
- ????if(typeof?success=='function')
- ????????file=o;
- ????else{
- ????????if(!o.file)
- ????????????return?console.log('并没有传入需要上传的文件')
- ????????if(A=o.success)
- ????????????success=A
- ????????if(A=o.upload)
- ????????????upload=A
- ????????if(A=o.error)
- ????????????error=A
- ????}
- ????x=new?XMLHttpRequest()
- ????x.open('POST','https://x.mouto.org/wb/x.php?up&_r='+Math.random(),1)
- ????if(upload)
- ????????x.upload.onprogress=function(e){
- ????????????upload(e.loaded/e.total)
- ????????}
- ????x.onload=function(r){
- ????????r=JSON.parse(x.responseText)
- ????????if(r.error&&error)
- ????????????return?error(r.error)
- ????????if(r.pid&&success)
- ????????????return?success(r.pid)
- ????}
- ????x.send(file)
- }
实现代码
将以下代码放入一个单独的文章页面发布。注意第5行的js地址,懒的也可以不换哈。这样就可以试着上传看看可以不了。
PS:一定上先登陆微博。
- <div?class="momll"><style>
- momll-img{max-width:80%;display:block;
- }#选图{position:absolute;z-index:1;cursor:pointer;opacity:0;}#选图,#box{background:#b485e2;color:#FFF;display:block;height:40px;line-height:30px;text-align:center;}</style>
- <input?type="file"?id="选图">
- <div?id="box">选择或拖拽图像进行上传</div><img?id="图片"><p?id="文本"></p><script?src="http://pic.wosn.net/blog/170917/7HBc4H86La.js"></script><script>
- 选图.onchange=function(){
- if(!this.files||!this.files[0])
- return?alert('选取文件出错!')
- ????var
- ????图片文件=this.files[0]
- if(图片文件.type.indexOf('image')!=0)
- return?alert('这不是一个图像或音频!')
- ????UP(图片文件,function(pid){
- ????????文本.innerHTML=
- ????????图片.src='https://ww2.sinaimg.cn/large/'+pid+?'.jpg'
- ????},function(){
- ????????alert('上传文件出错了!')
- ????},function(进度){
- ????????文本.innerHTML=进度*100+'%'
- ????})
- }
- </script></div>
插件推荐
推荐两个《极简图床》和《围脖就是好图床)》浏览器插件来实现微博图床(将图片上传到新浪微博)的功能,体验很棒。
极简图床谷歌插件:点击下载
谷歌插件离线安装:chrome中新开一个窗口,输入:chrome://extensions/
回车。把刚下载的crx文件拖放到界面里,松开鼠标,会弹出安装提示,点击确定安装就OK。
PS:文中代码取自https://www.mom1.cn/3107.html
评论