Wordpress pure code realizes Weibo map bed (upload pictures to Sina Weibo)

one thousand four hundred and twenty-one
article

September 17, 2017 03:45:57 WordPress comment 1,198 Reading mode

The benefits of using a stable map bed for general blog stations are self-evident, and Sina is also relatively stable, so it is relatively safe to use it. No more words, let's talk about how to achieve "Wordpress's pure code implementation of Weibo map bed (upload pictures to Sina Weibo)".

The following is the effect picture of the implementation of the Weibo map bed (uploading pictures to Sina Weibo) in WordPress pure code.

Js code

Package and call the following js code, or use the packaged“ 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 ('No files to upload have been passed in ')
???????? 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)
}

Implementation code

Put the following code into a separate article page to publish. Pay attention to the js address in line 5. Lazy people can not change it. In this way, you can try to upload it to see if it is ok.

PS: Be sure to log in to Weibo first.

<div? class = "momll" ><style>
momll-img{max-width:80%; display:block;
}#Select {position: absolute; Z-index: 1; cursor: pointer; opacity: 0;} # Select a picture, # box {background: # b485e2; color:#FFF;display:block;height:40px;line-height:30px;text-align:center;}</style>
<input? type= "file" ? id= Select Image >
<div? id= "box" >Select or drag images to upload</div><img? id= Picture ><p? id= Text ></p><script? src= " http://pic.wosn.net/blog/170917/7HBc4H86La.js " ></script><script>
Picture.onchange= function (){
if (! this .files||! this .files[0])
return ? Alert ('Error selecting file! ')
???? var
???? Picture file= this .files[0]
if (Picture file. type. indexOf ('image ')= 0)
return ? Alert ('This is not an image or audio! ')
???? UP (picture file, function (pid){
???????? Text.innerHTML=
???????? Picture. src='https: //ww2.sinaimg.cn/large/'+pid+?'. jpg'
????}, function (){
???????? Alert ('Error uploading file! ')
????}, function (Progress){
???????? Text. innerHTML=progress * 100+'%'
????})
}
</script></div>

Plug in recommendation

Recommend two browser plug-ins of "Minimal Pictorial Bed" and "Weibo is a good Pictorial Bed" to realize the function of Weibo Pictorial Bed (upload pictures to Sina Weibo). It's a great experience.

Google Plug in for Minimal Table: Click Download

Offline installation of Google plug-in: a new window is opened in Chrome, enter: chrome://extensions/ enter. Drag the downloaded crx file to the interface, release the mouse, and an installation prompt will pop up. Click OK to install.

PS: Code in the text is taken from https://www.mom1.cn/3107.html

AD ： Please click here to support Watson's blog!

Js code

Implementation code

Plug in recommendation

Comment