请选择 进入手机版 | 继续访问电脑版

Mn

 找回密码
 立即注册
查看: 101|回复: 2

利用html搭建自己的图床

[复制链接]

21

主题

37

帖子

165

积分

注册会员

Rank: 2

积分
165
发表于 2022-11-4 22:51:47 | 显示全部楼层 |阅读模式
用记事本保存以下源码,命名为index.html
上传到你的空间就可以得到一个无限存储的图床了。
图片上传之后并不显示你的域名。


  1. <!DOCTYPE html>
  2. <head>
  3.         <meta charset="utf-8">
  4.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1">
  6.         <title>电报图床 - 电报图像托管,免费和无限的图像托管</title>
  7.         <meta name="description" content="Telegraph Image">
  8.         <meta name="keywords" content="Telegraph">
  9.         <link rel="shortcut icon" href="https://missuo.ru/file/88c3bbfdd222f759cc9b0.png">
  10.         <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
  11.         <style>
  12.             #input {
  13.                                 position: absolute;
  14.                                 top: 0;
  15.                                 left: 0;
  16.                                 opacity: 0;
  17.                                 z-index: -10;
  18.                         }
  19.             .container{
  20.                 display:table;
  21.                 height:100%;
  22.             }
  23.             .row{
  24.                 display: table-cell;
  25.                 vertical-align: middle;
  26.             }
  27.             .row-centered {
  28.                 text-align:center;
  29.             }
  30.             .col-centered {
  31.                 display:inline-block;
  32.                 float:none;
  33.                 text-align:center;
  34.             }
  35.             .alert{
  36.                                 font-size: 13px;
  37.                         }
  38.             .upload-file{
  39.                   position: relative;
  40.                   width: 230px;
  41.                   left:0;
  42.                   right:0;
  43.                   margin:0 auto;
  44.                   padding: 10px 15px;
  45.                   border-radius: 5px;
  46.                   background-color: rgb(230,230,250);
  47.                   color: #333333;
  48.                   font-size: 14px;
  49.                   text-align: center;
  50.                   overflow: hidden;
  51.                   
  52.                 }
  53.             
  54.             .upload-file span{
  55.                   text-overflow: ellipsis;
  56.                   white-space: nowrap;
  57.                   overflow: hidden;
  58.             }
  59.             
  60.             .upload-file:hover{
  61.                   font-size: 15px;
  62.                   border-color: rgb(39, 226, 81);
  63.                 }
  64.             
  65.             .upload-file input[type='file']{
  66.                   height: 100%;
  67.                   width: 100%;
  68.                   position: absolute;
  69.                   top: 0;
  70.                   right: 0;
  71.                   opacity: 0;   
  72.                   filter: alpha(opacity=0);
  73.                   cursor: pointer;
  74.                 }
  75.                 img{
  76.                  width:auto;
  77.                  height:auto;
  78.                  max-width:100%;
  79.                  max-height:100%;
  80.                 }

  81.         </style>
  82.     </head>
  83. <body>
  84.     <div class="container">
  85.         <br>
  86.         <h4 style="text-align:center;font-size:20px;">电报图像托管</h4>
  87.         <h4 style="text-align:center;font-size:10px;color:red;">免费和无限的图像托管</h4>
  88.         <h4 style="text-align:center;font-size:10px;color:#A569BD;">立即开始上传您的图片,上传图片限制5M以内</h4>
  89.         <br>
  90.         <form role="form" action="##" onsubmit="return false" method="post" enctype="multipart/form-data" id="uploadForm">
  91.         <div class="upload-file">
  92.         <input type="file" class="input-file" name="file" accept="image/png, image/jpeg, image/jpg, image/gif">
  93.         <span class="tip">选择图片</span>
  94.         </div>
  95.         <br><div class="Result"></div>
  96.         <textarea id="input"></textarea>
  97.         <button type="submit" name="submit" class="btn btn-primary btn-block" style="background: #4066ff;border:none;" onclick="submitdata()">上传</button>
  98.         </form><br>
  99.         <p align="center">Copyright © 2022 <a href="http://www.google.com" target="_Blank">Google</a> Inc. All Rights Reserved.,Powered By: <a href="http://www.google.com" target="_Blank">Vincent</a>, <a href="http://www.google.com" target="_Blank">[ Install Help ]</a></p>

  100.         
  101.     </div>
  102.     <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  103.     <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  104.     <script type="text/javascript">
  105.         var fileInput = document.querySelector('.input-file');
  106.         var filelist = fileInput.files
  107.         file = filelist.item(0)
  108.         var tip = document.querySelector('.tip');
  109.         fileInput.addEventListener('change',function(e){
  110.             tip.textContent = '已选择 ' + this.files.length + ' 图片';
  111.             //tip.textContent = this.files[0].name;
  112.         })
  113.         function CopyUrl() {
  114.          var d = document.getElementById("imgurl");
  115.          d.select();
  116.          document.execCommand("Copy");
  117.          alert("Copy Successfully!");
  118.         }
  119.         function submitdata() {
  120.             $(".container .Result").css('display', 'block');
  121.                         $(".container .Result").html(
  122.                                                     '<div class="alert alert-warning"><strong>Uploading</strong></div>');
  123.                         $(".container .ewm").css('display', 'block');
  124.             $.ajax({
  125.                 type: "POST",
  126.                 dataType: "json",
  127.                 url: "//telegraph-api.yunimg.cc" ,
  128.                 data: new FormData($('#uploadForm')[0]),
  129.                 cache: false,
  130.                 processData: false,
  131.                 contentType: false,
  132.                 success: function (result) {
  133.                     console.log(result);
  134.                     if(result.code == 200){
  135.                         $(".container .Result").css('display', 'block');
  136.                                             $(".container .Result").html(
  137.                                                 '<div class="alert alert-info"><strong>上传成功!</strong><br><br>图片的外部链接是: <br><br><input type="text" value="'+ result.src +'" id="imgurl" size="53"><br><br><a href="'+ result.src + '" target="_Blank"><button type="button" class="btn btn-primary">在新标签中打开</button></a> &nbsp;<button onclick="CopyUrl()" class="btn btn-primary">复制网址</button><br><br><img src = '+ result.src + '/></div>');
  138.                                             $(".container .ewm").css('display', 'block');
  139.                     }else{
  140.                                                 $(".container .Result").css('display', 'block');
  141.                                         $(".container .Result").html(
  142.                                                 '<div class="alert alert-danger"><strong>未知错误</strong></div>');
  143.                                                 $(".container .ewm").css('display', 'block');
  144.                                                 setTimeout('closesctips()', 12000);
  145.                                                         }
  146.                                         },
  147.                 error : function() {
  148.                     $(".container .Result").css('display', 'block');
  149.                                         $(".container .Result").html(
  150.                                                 '<div class="alert alert-danger"><strong>服务器错误</strong></div>');
  151.                                         $(".container .ewm").css('display', 'block');
  152.                                         setTimeout('closesctips()', 12000);
  153.                 }
  154.             });
  155.         }
  156.     </script>
  157.         <script>
  158. var _hmt = _hmt || [];
  159. (function() {
  160.   var hm = document.createElement("script");
  161.   hm.src = "https://hm.baidu.com/hm.js?ca319888b495b0f9513e9618f58ba35e";
  162.   var s = document.getElementsByTagName("script")[0];
  163.   s.parentNode.insertBefore(hm, s);
  164. })();
  165. </script>
  166. </body>
  167. </html>
复制代码

图床演示:http://p991245v.beget.tech
由于是俄罗斯免费空间域名,有可能报毒

如果提示病毒,更换浏览器,或者使用谷歌浏览器

图片演示:







回复

使用道具 举报

0

主题

2

帖子

6

积分

新手上路

Rank: 1

积分
6
发表于 2022-11-7 17:40:52 来自手机 | 显示全部楼层
你是个人才
回复

使用道具 举报

21

主题

37

帖子

165

积分

注册会员

Rank: 2

积分
165
 楼主| 发表于 2022-11-8 21:18:52 | 显示全部楼层

抬爱了
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|bbs

GMT+8, 2023-1-29 17:21 , Processed in 0.038619 second(s), 27 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表