仿360免费图床HTML网站源码

2025-01-15 412

360免费图床HTML网站源码,使用文件直接上传,使用360官方的链接来做图床链接,

源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,上传到服务器里面访问即可使用,复制到你的index.html即可

仿360免费图床HTML网站源码

<!DOCTYPE html>
<html lang=“zh-CN”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>文件上传</title>
<style>
/* 重置默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 设置页面的字体和背景 */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
color: #333;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
/* 容器样式 */
.container {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
text-align: center;
}
/* 标题样式 */
h2 {
font-size: 24px;
margin-bottom: 20px;
color: #333;
}
/* 文件输入框样式 */
input[type=”file”] {
display: block;
margin: 0 auto 20px;
padding: 8px;
background-color: #f7f7f7;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
color: #333;
}
/* 按钮样式 */
button {
background-color: #007BFF;
color: #fff;
padding: 12px 20px;
font-size: 16px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
/* 按钮悬浮效果 */
button:hover {
background-color: #0056b3;
}
/* 上传结果区域样式 */
.result {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f9f9f9;
font-size: 16px;
color: #333;
min-height: 40px;
}
/* 错误或成功的提示信息样式 */
.result.success {
border-color: #28a745;
background-color: #e9f7e8;
}
.result.error {
border-color: #dc3545;
background-color: #f8d7da;
}
/* 显示图片的样式 */
.uploaded-image {
margin-top: 20px;
max-width: 100%;
height: auto;
border-radius: 4px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class=“container”>
<h2>图片上传</h2>
<form id=“uploadForm”>
<input type=“file” id=“fileInput” name=“file” accept=“image/*” required />
<button type=“submit”>上传文件</button>
</form>
<div id=“result” class=“result”></div>
</div>
<script>
// 获取表单和结果显示区域
const form = document.getElementById(‘uploadForm’);
const resultDiv = document.getElementById(‘result’);
form.addEventListener(‘submit’, async (e) => {
e.preventDefault(); // 防止表单刷新页面
// 获取文件输入
const fileInput = document.getElementById(‘fileInput’);
const file = fileInput.files[0];
if (!file) {
resultDiv.innerHTML = ‘<p class=“error”>请先选择文件!</p>‘;
return;
}
const formData = new FormData();
formData.append(‘file’, file);
try {
// 使用 fetch 发送请求
const response = await fetch(‘https://api.xinyew.cn/api/360tc’, {
method: ‘POST’,
body: formData
});
const data = await response.json();
if (data.errno === 0) {
// 成功处理图片,显示结果
resultDiv.innerHTML = `
<p>上传成功!</p>
<p>图片链接: <a href=“${data.data.url}” target=“_blank”>${data.data.url}</a></p>
<p>图片文件名: ${data.data.imgFile}</p>
<img src=“${data.data.url}” alt=“上传的图片” class=“uploaded-image” />
`;
} else {
// 失败,显示错误
resultDiv.innerHTML = `<p class=“error”>${data.error}</p>`;
}
} catch (error) {
resultDiv.innerHTML = `<p class=“error”>请求失败:${error.message}</p>`;
}
});
</script>
</body>
</html>

郑重声明:
1.本站所有源代码资源数据均来自互联网,如无特殊说明或标注,版权归原作者所有,我们仅提供测试使用,请在下载后24小时内删除
2.下载后请第一时间查杀后门以及病毒文件,本站已经安全检测过,不能保证查的彻底。
3.任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。
4.如若本站内容侵犯了原作者的合法权益,可联系我们进行删除
5.源码功能,完整性,搭建问题,使用操作等特殊问题,由于时间成本关系,本站客服不免费解答,请见谅。
6.本站搭建成功,你未能搭建起来,请按说明,检查环境是否匹配,或者下载本站其他源码测试。未标测试和附带说明的源码请自行研究。
7.我们不作任何承诺,也不保证100%可用,本站也尽最大能力搜集一些完整的源码进行整理测试发布.购买或者下载后,不支持任何退款理由,感谢理解!
8.本站所有资源都来自互联网,我们只负责整理分享,如果您的要求非常高,请找专业的网站开发公司!

521源码 学习教程 仿360免费图床HTML网站源码 https://www.111685.com/shipinsucai/shipin/8152.html

Avatar photo

一个只做精品源码资源整合的搬运工!

下一篇:

已经没有下一篇了!

常见问题
  • 资源,源代码均来自网络,某一套代码完整性功能并未满足您,请勿责怪,下载其他尝试,部分残缺的源码,只适合学习用,本站不做任何源码部署相关问题。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议重新下载即可!
查看详情

相关文章

发表评论
暂无评论