当前位置:空木白博客 > 网站源码 > 正文
空木白

作者:空木白

手机扫码查看

用淘宝接口来做博客图床

用淘宝接口来做博客图床

淘宝图床图片效果

复制以下代码至一个html文件,保存即可使用! (如果觉得麻烦,也可在本文章末尾回复评论下载文件)

<!DOCTYPE html>
<html>
<head>
<title>淘宝图床</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style type="text/css">
body{
background: url(http://api.wuzuhua.cn/tp/api.php);
webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
opacity: 1;
font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
}
.tu form{
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -250px;
width: 500px;
height: 200px;
border: 4px dashed #fff;
background: rgba(255, 255, 255, 0.43);
}
.tu form p{
text-align: center;
color: #ffffff;
}
.tu form input{
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
outline: none;
opacity: 0;
}
.tu form button{
margin: 0;
color: #fff;
background: #16a085;
border: none;
width: 508px;
height: 35px;
margin-top: -20px;
margin-left: -4px;
border-radius: 4px;
border-bottom: 4px solid #117A60;
transition: all .2s ease;
outline: none;
}
.tu form button:hover{
background: #149174;
color: #0C5645;
}
.tu form button:active{
border:0;
}
.tu .setfile{
height:200px;
display: flex;
flex-wrap: wrap;
align-content: center;
}
.imgv{
position: absolute;
left: 50%;
margin-top: 60px;
margin-left: -250px;
width: 500px;
height: auto;
display: none;
}

.imgv img{
width: 100%;
height:auto;
}
#purl{
text-align: center;
color:#fff;
}
#fileinfo{
display:none;
height: 200px;
text-align:center;
}
/*web background*/
.container{
display:table;
height:100%;
}

.row{
display: table-cell;
vertical-align: middle;
}
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
text-align:left;
margin-right:-4px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">

<div class="tu">
<div id="logo" class="mx-auto py-2">

</div>
<div class="imgv bg-white p-3">
<img src="" id="tupian" class="img-fluid">
<div class="form-group p-3">
<label for="exampleFormControlInput1">外链URL:</label>
<input type="text" id="iurl" class="form-control" id="exampleFormControlInput1" >
</div>
</div>
<form id="uploadForm" action="https://s.taobao.com/image" method="post">
<input type="file" name="imgfile">
<p class="setfile p-2 m-2">
<i class="fa fa-cloud-upload fa-5x w-100" aria-hidden="true"></i>
<span class="w-100">选择或拖放文件到此处, 开始上传你的图片。</span>
</p>
<span id="fileinfo" class="my-2 p-2 text-center"></span>
<button type="submit" id="upImg">上传</button>
</form>
</div>
</div>
<script type="text/javascript">

function renderSize(value){
if(null==value||value==''){
return "0 Bytes";
}
var unitArr = new Array("Bytes","KB","MB","GB","TB","PB","EB","ZB","YB");
var index=0,
srcsize = parseFloat(value);
index=Math.floor(Math.log(srcsize)/Math.log(1024));
var size =srcsize/Math.pow(1024,index);
// 保留的小数位数
size=size.toFixed(2);
return size+unitArr[index];
}

$(document).ready(function(){
$('form input').change(function () {
$('form p').hide();
$('#fileinfo').css('display', 'block');
var upfile=this.files;
var tstr='您即将上传'+upfile[0].name+'('+renderSize(upfile[0].size)+')<br/> 上传前请检测文件是否合法,禁止上传色情、反动、暴力等违法违规图片<br/>造成的一切恶果由图片上传者承担!';
$('#fileinfo').html(tstr);
$("#uploadForm").on('submit',(function(e) {
e.preventDefault();
$('#upImg').html('上传中');
$.ajax({
url: "https://s.taobao.com/image",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
dataType: 'json',
success: function(data){
$('#upImg').html('上传完成');
$("#uploadForm").hide();
$(".imgv").css('display', 'block');;
$("#iurl").val(data.url);
$("#tupian").attr("src",data.url);
},
error: function() {
$('#upImg').html('上传失败');
}
});
}));
});
});
</script>
</body>
</html>
抱歉,隐藏内容 回复 后刷新可见
 您阅读这篇文章共花了: 
未经允许不得转载:

作者:空木白, 转载或复制请以 超链接形式 并注明出处 空木白博客
原文地址:《用淘宝接口来做博客图床》 发布于2018-12-17

分享到:
赞(0) 打赏

评论 2

评论前必须登录!

  注册

  1. #2

    wenjianlllllg搞笑

    aaa20191个月前 (05-22)这家伙可能用了岛国的代理 谷歌浏览器 Windows 10 日本
  2. #1

    66666666err评论

    淡定3个月前 (03-17)来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 联通

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

隐藏
变装
EA PLAYER &

历史记录 [ 注意:部分数据仅限于当前浏览器 ]清空

      00:00/00:00
      切换注册

      登录

      忘记密码 ?

      您也可以使用第三方帐号快捷登录

      Q Q 登 录
      微 博 登 录
      切换登录

      注册