当前位置:网站首页 技术交流 正文

HTML新浪、百度、360、搜狗图床源码

发布于4个月前 (02-08) 213 浏览 2 评论

昨天那篇游记图片太多太大,上传了一个图床,但是响应速度巨慢,严重影响了网站访问体验,本宝宝根本忍不了

于是,搞了个图床。

光芒万丈图床

http://tc.cunzher.cn

实际测试

此文的全文图片均使用光芒万丈新浪图床接口

https://www.cunzher.top/post/225.html

支持GIF图片展示,一般高清图都能上传,文件大小限制不清楚,没有达到过上限

源代码

<!-- 
声明:前端无版权,调用YoungxjApis接口,来自光芒万丈www.cunzher.cn
-->
<!DOCTYPE html>
<html>
<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>光芒万丈图床上传 - Cdn图床,百度图床,新浪图床,360图床,搜狗图床</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>
<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: #007bff;}#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: #007bff;}.btn{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: 6px 10%;}.btn:hover,.yanshibtn:hover{background: none repeat scroll 0 0 #9B59B6; 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;}
</style>
</head>
<body>
<div id='container'>
<div id='hero-img'>
</div>
<div id='profile-img'>
<img src='https://ww2.sinaimg.cn/large/005BYqpggy1fxbboztih4j305k05kwef.jpg' id="imgLoading" class="Rotation img" title="显示与隐藏"/>
</div>
<div id='content'>
<h2>光芒万丈图床上传</h2>
<h5>
百度图床-新浪图床-搜狗图床-360图床
</h5>
<div id="progress"><progress max="100" value="0" id="pg"></progress></div>
<p 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="SinaImg" onclick="update('sina')" 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="soImg" onclick="update('so')" class="btn btn-default" rel='nofollow'>360 图床</a>
<input type="file" id="file" name="file" onchange="sc($('#imgType').attr('imgType'));" style="display:none" accept="image/*">
</form>
<div 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>
</body>
<script type="text/javascript">
/**
 * @act      sina
 * @version  1.2
 * @author   cunzher
 * @date     2018-11-17
 * @url      https://www.cunzher.cn
 */

 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 'sougou':
  var maxSize = 2097152;
  break;
  case 'baidu':
  var maxSize = 2097152;
  break; 
  case 'so':
  var maxSize = 2097152; 
  break;
  case 'sina':
  var maxSize = 10485760; 
  break;
  default:
  var maxSize = 10485760; 
  } 
  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]);  
  var YoungxjApisToken = 'f07b711396f9a05bc7129c4507fb65c5';
  switch(type){
  case 'sougou':
  var apiUrl = 'https://apis.yum6.cn/api/5bd7f16aa33d7';
  break;
  case 'baidu':
  var apiUrl = 'https://apis.yum6.cn/api/5bd828881f92b'; 
  break;
  case 'so':
  var apiUrl = 'https://apis.yum6.cn/api/5bd90750c3f77'; 
  break;
  case 'sina':
  var apiUrl = 'https://apis.yum6.cn/api/5bd44dc94bcfc'; 
  break;
  default:
  return false;
  };
  $('#progress').show();
  $.ajax({
  url: apiUrl+'?token='+YoungxjApisToken,   
  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 = '';
  if(type!='sina'){var imgSrc = ret['data'];}else{var imgSrc = ret['data']['url'];}
  img += '<img src="'+imgSrc+'" name="sinaimg" id="sinaimg">';
 
  $('#Imgs_url').val(imgSrc);
  $('#Imgs_html').val('<img src="'+imgSrc+'"/>');
  $('#Imgs_Ubb').val('[img]'+imgSrc+'[/img]');
  $('#Imgs_markdown').val('![]('+imgSrc+')');
  $('#images').html(img);$('#imgLoading').attr('src','https://ww2.sinaimg.cn/large/005BYqpggy1fxbbgt35opj305k05k3yh.jpg');
  $('#imgurl').show();
  $('#progress').hide();  
  }else{
  $('#progress').hide();
  $('#imgLoading').attr('src','https://ww2.sinaimg.cn/large/005BYqpggy1fxbbey7nfuj305k05k3yg.jpg');
  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>

GitHub

https://github.com/cunzher/cunzher-Picture-Bed

已有2位网友发表了看法:

  • 青衫慧博客

    青衫慧博客  评论于 [3个月前 (02-12)]  回复

    很不错,对接的杨小杰的接口吧。rolleyes

    • cunzher

      cunzher  评论于 [3个月前 (02-13)]  回复

      arrow前面注释写了,哈哈

欢迎您发表评论:

Cunzher's Blog

cunzher,难生
大一,十九碎,医学僧。
这里是光芒万丈 这世界万丈光芒

博主留言:
哇,2018就这么过去了
希望2019年能快快乐乐的
过年更博是不是有点独秀
祝大家新年快乐,万事如意

Copyright©光芒万丈 所有权利保留
工信部ICP备案号:
豫ICP备17038986号
公安机关备案号:
豫公网安备 41102502000036号
汐萌站长联盟成员网站
拒绝恶意访客计划执行单位