利用html搭建自己的图床

蜡笔小新 · 发表于 2022-11-4 22:51:47

用记事本保存以下源码，命名为index.html
上传到你的空间就可以得到一个无限存储的图床了。
图片上传之后并不显示你的域名。

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>电报图床 - 电报图像托管，免费和无限的图像托管</title>
<meta name="description" content="Telegraph Image">
<meta name="keywords" content="Telegraph">
<link rel="shortcut icon" href="https://missuo.ru/file/88c3bbfdd222f759cc9b0.png">
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
#input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: -10;
}
.container{
display:table;
height:100%;
}
.row{
display: table-cell;
vertical-align: middle;
}
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
text-align:center;
}
.alert{
font-size: 13px;
}
.upload-file{
position: relative;
width: 230px;
left:0;
right:0;
margin:0 auto;
padding: 10px 15px;
border-radius: 5px;
background-color: rgb(230,230,250);
color: #333333;
font-size: 14px;
text-align: center;
overflow: hidden;
}
.upload-file span{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.upload-file:hover{
font-size: 15px;
border-color: rgb(39, 226, 81);
}
.upload-file input[type='file']{
height: 100%;
width: 100%;
position: absolute;
top: 0;
right: 0;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer;
}
img{
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}
</style>
</head>
<body>
<div class="container">
<br>
<h4 style="text-align:center;font-size:20px;">电报图像托管</h4>
<h4 style="text-align:center;font-size:10px;color:red;">免费和无限的图像托管</h4>
<h4 style="text-align:center;font-size:10px;color:#A569BD;">立即开始上传您的图片,上传图片限制5M以内</h4>
<br>
<form role="form" action="##" onsubmit="return false" method="post" enctype="multipart/form-data" id="uploadForm">
<div class="upload-file">
<input type="file" class="input-file" name="file" accept="image/png, image/jpeg, image/jpg, image/gif">
<span class="tip">选择图片</span>
</div>
<br><div class="Result"></div>
<textarea id="input"></textarea>
<button type="submit" name="submit" class="btn btn-primary btn-block" style="background: #4066ff;border:none;" onclick="submitdata()">上传</button>
</form><br>
<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>
</div>
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
var fileInput = document.querySelector('.input-file');
var filelist = fileInput.files
file = filelist.item(0)
var tip = document.querySelector('.tip');
fileInput.addEventListener('change',function(e){
tip.textContent = '已选择 ' + this.files.length + ' 图片';
//tip.textContent = this.files[0].name;
})
function CopyUrl() {
var d = document.getElementById("imgurl");
d.select();
document.execCommand("Copy");
alert("Copy Successfully！");
}
function submitdata() {
$(".container .Result").css('display', 'block');
$(".container .Result").html(
'<div class="alert alert-warning"><strong>Uploading</strong></div>');
$(".container .ewm").css('display', 'block');
$.ajax({
type: "POST",
dataType: "json",
url: "//telegraph-api.yunimg.cc" ,
data: new FormData($('#uploadForm')[0]),
cache: false,
processData: false,
contentType: false,
success: function (result) {
console.log(result);
if(result.code == 200){
$(".container .Result").css('display', 'block');
$(".container .Result").html(
'<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>  <button onclick="CopyUrl()" class="btn btn-primary">复制网址</button><br><br><img src = '+ result.src + '/></div>');
$(".container .ewm").css('display', 'block');
}else{
$(".container .Result").css('display', 'block');
$(".container .Result").html(
'<div class="alert alert-danger"><strong>未知错误</strong></div>');
$(".container .ewm").css('display', 'block');
setTimeout('closesctips()', 12000);
}
},
error : function() {
$(".container .Result").css('display', 'block');
$(".container .Result").html(
'<div class="alert alert-danger"><strong>服务器错误</strong></div>');
$(".container .ewm").css('display', 'block');
setTimeout('closesctips()', 12000);
}
});
}
</script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?ca319888b495b0f9513e9618f58ba35e";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>

复制代码

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

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

图片演示：

yexuba · 发表于 2022-11-7 17:40:52

你是个人才

蜡笔小新 · 发表于 2022-11-8 21:18:52

yexuba 发表于 2022-11-7 17:40
你是个人才

抬爱了

		自动登录	找回密码
密码			立即注册