首页
源码插件
代码笔记
精品资源
美图音乐
点滴记忆
关于博主
友情链接
搜索
搜索
热门搜索
360官方API构建高效便捷的图片上传单页源码
黄金首饰价格查询系统api源码
BingGan
她说爱你,没说只爱你!
累计撰写
101
篇文章
累计收到
54
条评论
首页
导航
首页
源码插件
代码笔记
精品资源
美图音乐
点滴记忆
关于博主
友情链接
旗下站点
Bg‖ 在线音乐
Bg‖ Mail邮件
Bg‖ SEO外链
搜索文章
2025-6-30
黄金首饰价格查询系统api源码
项目说明: 实时更新的黄金价格查询平台,提供 内地/香港金店报价,同步周大福、周生生等主流品牌黄金、铂金及金条价格,显示伦敦金、纽约金等国际金价涨跌幅度及当日高低点,上海黄金交易所等国内黄金品种实时交易数据,通过动态图表直观展示黄金价格趋势变化,所有数据均从第三方API实时获取,支持移动端自适应显示。 index.html部分 !DOCTYPE html...
2025年-6月-30日
12 阅读
0 评论
代码笔记
2025-6-24
360官方API构建高效便捷的图片上传单页源码
页面采用了响应式设计原则,确保在各种设备上都能提供良好的用户体验。通过meta viewport标签设置视口属性,保证页面能适应不同屏幕尺寸。 新建一个html单页把源码复制进去,然后修改背景图路径即可。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>360图床文件上传 - 双虹云博客</title> <style> /* 重置默认样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 设置页面的字体和添加背景图片 */ body { font-family: Arial, sans-serif; background: url('static/images/background.png') no-repeat center center fixed; /* 使用服务器上的路径 */ background-size: cover; /* 保证背景图片覆盖整个视窗 */ color: #333; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; } /* 容器样式 */ .container { background-color: rgba(255, 255, 255, 0.9); /* 使用半透明白色背景,以便在图片背景上更清晰地显示内容 */ 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; } /* 进度条样式 */ .progress-bar { width: 100%; height: 30px; background-color: #ddd; border-radius: 4px; margin-top: 20px; overflow: hidden; } .progress-fill { height: 100%; background-color: #4caf50; width: 0; line-height: 30px; text-align: center; color: white; } /* 上传结果区域样式 */ .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 class="progress-bar"> <div class="progress-fill" id="progressFill">0%</div> </div> </div> <script> const form = document.getElementById('uploadForm'); const resultDiv = document.getElementById('result'); const progressBar = document.querySelector('.progress-fill'); form.addEventListener('submit', (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); const xhr = new XMLHttpRequest(); xhr.open('POST', 'https://api.xinyew.cn/api/360tc', true); // 监听上传进度事件 xhr.upload.onprogress = function(event) { if (event.lengthComputable) { const percentComplete = (event.loaded / event.total) * 100; progressBar.style.width = percentComplete + '%'; progressBar.innerHTML = Math.round(percentComplete) + '%'; } }; xhr.onload = function() { if (xhr.status === 200) { const data = JSON.parse(xhr.responseText); 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>`; } } else { resultDiv.innerHTML = `<p class="error">请求失败:${xhr.statusText}</p>`; } }; xhr.onerror = function() { resultDiv.innerHTML = '<p class="error">请求发生错误。</p>'; }; xhr.send(formData); }); </script> </body> </html>
2025年-6月-24日
37 阅读
0 评论
代码笔记
2024-5-20
萌新源API管理系统PHP源码
萌新源API管理系统是一款基于layui和pear-Admin-layui前端框架,以及thinkphp后端框架开发的API管理后台系统。
2024年-5月-20日
641 阅读
1 评论
源码分享
2024-4-25
全新Storm Core Api管理系统源码开源版
Core Api是一个Api系统,程序实现了API集成等基础功能,后期估计会更新key调用api,或者实现付费功能。 前端自带两套模板,源码开源无加密,站长可自行二开。 这套源码昨天就已经测试好了,时间来不及了 今天才放出来。
2024年-4月-25日
899 阅读
0 评论
精品资源
2024-4-11
php获取QQ头像API接口源码
做网站或者做博客很多地方都能用到QQ头像或者网站logo 网站ico之类的,外面接口也是一堆,毕竟调用别人的域名接口还是没有自己的放心,在这里记录一下接口API,方便后期使用。
2024年-4月-11日
314 阅读
0 评论
源码分享
2024-3-29
记录一个php实现随机图片的API源码
接口支持URL/JSON/XML/302跳转和直接显示图片的形式调用,调用URL直接显示图片链接,302跳转是指访问API时跳转到图片文件的链接。
2024年-3月-29日
420 阅读
0 评论
源码分享
2024-3-21
自动采集QQ微信头像php源码附API接口
源码说明: 最新QQ微信头像获取php源码,页面自带头像分类功能,点击头像可查看更多,源码无需依赖数据库,直接上传到站点根目录解压即可使用。 头像API接口来自第三方,包括js都是引用的超链,觉得卡的话自己本地话即可。 下载地址: [cv] https://wwp.lanzoup.com/iRBLU1s43ajg [/cv]
2024年-3月-21日
333 阅读
0 评论
美图音乐
2024-3-16
php生成二维码源码API
程序API直接本地生成二维码,并非调用第三方接口。 直接上传源码至根目录解压即可使用
2024年-3月-16日
449 阅读
0 评论
源码分享
2024-3-15
php获取指定网站的favicon图标API源码
favicon.ico说明: favicon就是显示在浏览器标题栏左侧的小图标,也称为网站头像。 一般给博客友情链接前面加一个图标能够带来有视觉上面的效果。 此源码可直接读取目标网站的favicon.ico的URL 例子/方法: 新建一个ico.php 和一个icoimg图片文件,把下面php源码复制粘贴进去即可,源码来自饺子(FLY),原版文件并未做任何...
2024年-3月-15日
585 阅读
2 评论
源码分享