前边文章说了如何搭建百度、搜狗、阿里图床接口,那自然也少不了一个配套的上传源码💖 结尾惯例依旧有白嫖呦~😂

教程

直接上源码,HTML文件,怎么用我觉得没必要说了,大家都懂
给个搭建接口的教程 点这里
这个源码呀是我在一个很奇怪的网站上发现的,那个网站满屏广告,全都是盗版资源,资源也没有署名,在网上搜索到的也都是一个样,这个源码下载下来也是不太能用,我就大刀阔斧地改了一下,请原作者看到的话联系我一下

<!DOCTYPE html>
<html lang='zh-cn'>
<head>
    <meta charset='UTF-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>KAI白嫖图床</title>

    <link rel='stylesheet' href='https://cdn.bootcss.com/normalize/5.0.0/normalize.min.css'>
    <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
    <meta name="referrer" content="same-origin">
    <style>
    html,body {height: 100%;margin: 0;padding: 0;}body {font-family: 'lucida grande', 'lucida sans unicode', lucida, helvetica, 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;align-items: center;display: flex;}a{text-decoration:none;}#container {max-width: 400px;flex-basis: 100%;margin: 0 auto;background: #FFF;border-radius: 10px;box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);overflow: hidden;}#container #hero-img {width: 100%;height: 200px;background: #00fff7;}#container #profile-img {width: 160px;height: 160px;margin: -80px auto 0 auto;}#container #profile-img img {width: 100%;background: #FFF;border-radius: 50%;}#container #content {text-align: center;width: 320px;margin: 0 auto;padding: 0 0 50px 0;}#container #content h1 {font-size: 29px;font-weight: 500;margin: 30px 0 0 0;}#container #content p {font-size: 18px;font-weight: 400;line-height: 1.4;color: #666;margin: 15px 0 40px 0;}#container #content a {color: #CCC;font-size: 14px;margin: 0 10px;transition: color .3s ease-in-out;-webkit-transition: color .3s ease-in-out;line-height: 40px;}#container #content a:hover {color: #00fff7;}.btn{background: none repeat scroll 0 0 #36E034; border: 0 none; border-radius: 2px; color: #FFFFFF !important; cursor: pointer; font-family: "Open Sans","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",Arial,Verdana,Tahoma,sans-serif; font-size: 14px;  padding: 6px 10%;}.btn:hover,.yanshibtn:hover{background: none repeat scroll 0 0 #1BA1E2; border: 0 none; border-radius: 2px; color: #FFFFFF!important; cursor: pointer; font-family: "Open Sans","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",Arial,Verdana,Tahoma,sans-serif; font-size: 14px; padding: 8px 10%;}
    .imgType{display: none;}
    #images img{width: 100%}
    #imgurl input{width: 100%}
    #imgurl,#progress{display: none;}

    @-webkit-keyframes rotation{
        from {-webkit-transform: rotate(0deg);}
        to {-webkit-transform: rotate(360deg);}
    }

    .Rotation{
        -webkit-transform: rotate(360deg);
        animation: rotation 3s linear infinite;
        -moz-animation: rotation 3s linear infinite;
        -webkit-animation: rotation 3s linear infinite;
        -o-animation: rotation 3s linear infinite;
    }

    .img{border-radius: 250px;}
    footer{position:absolute;bottom:0;width:30%;height:30px;background-color: #85ff8f;}
</style>
</head>
<body>
    <div id='container'>
        <div id='content'>
            <h2>白嫖图床</h2>
            <h3>
                上传完成点击链接即可复制
            </h3>
            <h5>
                图片存在防盗链,直接复制生成的html代码使用默认解决了防盗链问题,其他形式如果不会解决请直接在网页head中加入 &lt;meta name=&quot;referrer&quot; content=&quot;same-origin&quot;&gt;
            </h5>
            <h4>注意百度图床会转码并裁剪图片!!</h4>
            <h4>阿里和搜狗速度快、通常文件不压缩、稳定易用,,区别在阿里图床没有防盗链</h4>
            <h4>搜狗图床图片有效期只有一天多,只能临时使用!</h4>
            <h4>禁止上传违法内容,永久保留日志,发生问题将会交给有关部门!!</h4>
            <div id="progress"><progress max="100" value="0" id="pg"></progress></div>
            <p class="imgType" id="imgType"></p>
            <form id="form1">
                <a href='javascript:void(0)' id="baiduImg" onclick="update('baidu')" class="btn btn-default" rel='nofollow'>百度图床</a><a href='javascript:void(0)' id="sougouImg" onclick="update('sougou')" class="btn btn-default" rel='nofollow'>搜狗图床-临时</a><a href='javascript:void(0)' id="aliImg" onclick="update('ali')" class="btn btn-default" rel='nofollow'>阿里图床-好用</a>
                <input type="file" id="file" name="file" onchange="sc($('#imgType').attr('imgType'));" style="display:none" accept="image/*">
            </form>
            <div class="imgContent" id="imgContent">
                <div id="images"></div>
                <div id="imgurl">
                    <code>ImgUrl:(点击链接自动复制)</code>
                    <input onclick="oCopy(this)" value=""  id="Imgs_url">
                    <code>HtmlUrl:(点击链接自动复制)</code>
                    <input onclick="oCopy(this)" value=""  id="Imgs_html">
                    <code>Ubb:(点击链接自动复制)</code>
                    <input onclick="oCopy(this)" value=""  id="Imgs_Ubb">
                    <code>Markdown:(点击链接自动复制)</code>
                    <input onclick="oCopy(this)" value=""  id="Imgs_markdown">
                </div>
            </div>

        </div>
    </div>
        <footer>
        <a href='https://www.wangkai88.com/archives/68/'>说明地址</a>
        Power By <a href='https://www.wangkai88.com'> wangkai88.com</a>
    </footer>
</body>

<script type="text/javascript">


 function update(type){
     $('#file').val('');
     $('#imgType').attr({
         imgType: type,
     });
     file.click();

 }


 function sc(type){
     if(!type){return false;}
     var animateimg = $("#file").val();
     $('#pg').val('0');
     var imgarr=animateimg.split('\\');
     var myimg=imgarr[imgarr.length-1];
     var houzui = myimg.lastIndexOf('.');
     var ext = myimg.substring(houzui, myimg.length).toUpperCase();  
     var file = $('#file').get(0).files[0];
     if(!file){return false;}
     var fileSize = file.size;

     switch(type){
         
         case 'baidu':
         var maxSize = 7340032;
         break;
         case 'sougou':
         var maxSize = 10485760;
         break;
         case 'ali':
         var maxSize = 4194304;
         break;
          
     } 
     if(ext !='.PNG' && ext !='.GIF' && ext !='.JPG' && ext !='.JPEG' && ext !='.BMP'){  
         parent.alert('文件类型错误,请上传图片类型');return false;  
     }else if(parseInt(fileSize) >= parseInt(maxSize)){  
         parent.alert('上传的文件不能超过'+maxSize/1024/1024+'MB');return false;  
     }else{
         $('#imgLoading').attr('src','https://ww2.sinaimg.cn/large/005BYqpgly1fxbbemsqxaj305k05k3yg.jpg');
         var data = new FormData($('#form1')[0]);  
         
         switch(type){
             case 'sougou':
             var apiUrl = '地址填在这';  //搜狗图片上传接口
             break;
             case 'baidu':
             var apiUrl = '地址填在这';   //百度图片上传接口
             break;
             case 'ali':
             var apiUrl = '地址填在这';     //阿里图片上传接口
             break;
             default:
             return false;
         };
         $('#progress').show();
         $.ajax({
             url: apiUrl,   
             type: 'POST',    
             data: data,    
             dataType: 'JSON', 
             processData: false,    
             contentType: false,
             xhr: function(){
                 var xhr = $.ajaxSettings.xhr();
                 if(onprogress && xhr.upload) {
                     xhr.upload.addEventListener("progress" , onprogress, false);
                     return xhr;
                 }
             }
         }).done(function(ret){
             if(ret['code']=='1'){
                
                var img = '';var imgurl = '';
                var img666 = ret['imgurl'];
                 
                 img = '<img src="'+img666+'" referrerPolicy="no-referrer" name="sinaimg" id="sinaimg">';
                 $('#Imgs_url').val(img666);
                 $('#Imgs_html').val('<img src="'+img666+'" referrerPolicy="no-referrer">');
                 $('#Imgs_Ubb').val('[img]'+img666+'[/img]');
                 $('#Imgs_markdown').val('![]('+img666+')');
                 $('#images').html(img);
                 $('#imgurl').show();
                 $('#progress').hide();  
             }else{
                 $('#progress').hide();
                 parent.alert(ret['msg']);
             }  
             
         });
         return false;  
     }    
 }

 function onprogress(evt){
     var loaded = evt.loaded;
     var tot = evt.total;
     var per = Math.floor(100*loaded/tot);
     $('#pg').val(per);

 }
 function oCopy(obj){
     obj.select();
     document.execCommand("Copy");
     if (browserRedirect()) {alert('您使用的可能是手机,有一定几率复制失败!请查看剪切板是否成功复制');}
 }

 function browserRedirect(){
     var sUserAgent = navigator.userAgent.toLowerCase();
     var bIsIpad = sUserAgent.match(/ipad/i) == 'ipad';
     var bIsIphone = sUserAgent.match(/iphone os/i) == 'iphone os';
     var bIsMidp = sUserAgent.match(/midp/i) == 'midp';
     var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == 'rv:1.2.3.4';
     var bIsUc = sUserAgent.match(/ucweb/i) == 'web';
     var bIsCE = sUserAgent.match(/windows ce/i) == 'windows ce';
     var bIsWM = sUserAgent.match(/windows mobile/i) == 'windows mobile';
     var bIsAndroid = sUserAgent.match(/android/i) == 'android';
     if(bIsIpad || bIsIphone || bIsMidp || bIsUc7 || bIsUc || bIsCE || bIsWM || bIsAndroid ){
         return 1;
     }
 };
 $(document).ready(function(){
     $('#imgLoading').click(function() {$("#imgContent").toggle();});
 });
</script>
</html>

发现的问题

  1. 搜狗图传接口用非同域接口时,接口会报500,,,,暂时还不知道为什么
  2. 接口地址跨域即使文件名为index也要填写完整的php地址,像这样https://x.x/x/index.php ,同域写到./x/就可以,我看了一下在用后者的时候Nginx没有返回Access-Control-Allow-Origin: *的响应标头,不知是为什么🤷‍♂️

开始白嫖

Kai 白嫖图床
不上传违法内容,合理使用即可

最后修改:2020 年 12 月 26 日
如果觉得我的文章对你有用,请随意赞赏