-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
8 lines (8 loc) · 8.14 KB
/
index.html
1
2
3
4
5
6
7
8
<!--
名称：四合一图床上传程序
版本：1.1
特色：主要利用CUI制作的一款四合一图床上传程序，集合百度，搜狗，新浪，360图床为一体的一键化图床，并能一键生成html,ubb,markdown显示图片格式一键复制，仅约一款8kb单页就能实现功能。
开源项目：Github[https://github.com/dorasees/cui-imgtourl-4in1
开发维护：Dorasees<https://www.dorasees.com>[dorasees@qq.com]
-->
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1,maximum-scale=1"><title>CUI-四合一图床上传程序</title><script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script><link rel="stylesheet" href="cui.css"><script type="text/javascript" src="cui.js"></script><link rel="stylesheet" href="https://cdnjs.loli.net/ajax/libs/mdui/0.4.2/css/mdui.min.css"><script src="https://cdnjs.loli.net/ajax/libs/mdui/0.4.2/js/mdui.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,.3);-webkit-box-shadow:0 0 30px rgba(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 #container #content a:hover{color:#007bff}.btn{background:none repeat scroll 0 0 #1BA1E2;border:0 none;border-radius:2px;color:#FFF!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:#FFF!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{max-height:120px}#imgurl input{width:100%}#imgurl,#progress{display:none}.img{border-radius:250px}</style></head><body><div id="container"><br><br><div class="cui-message cui-shadow-light margin" style="margin:0 auto;width:314px"><div class="cui-message-avatar"><img src="https://i.loli.net/2019/02/05/5c59661408fdf.jpg"></div><div class="cui-message-text"><div class="cui-message-title" style="width:340px">四合一图床上传程序</div><div class="cui-message-context" style="width:340px">基于 CUI 制作的图床上传程序</div></div></div><br><div id="content"><p class="imgType" id="imgType"></p><form id="form1"><br><a href="javascript:void(0)" id="baiduImg" onclick="update("baidu")" class="cui-btn cui-btn-normal cui-normal cui-shadow-light-blue cui-animate-hover-up" rel="nofollow">百度图床</a> <a href="javascript:void(0)" id="SinaImg" onclick="update("sina")" class="cui-btn cui-btn-normal cui-normal cui-shadow-light-blue cui-animate-hover-up" rel="nofollow">新浪图床</a> <a href="javascript:void(0)" id="sougouImg" onclick="update("sougou")" class="cui-btn cui-btn-normal cui-normal cui-shadow-light-blue cui-animate-hover-up" rel="nofollow">搜狗图床</a> <a href="javascript:void(0)" id="soImg" onclick="update("so")" class="cui-btn cui-btn-normal cui-normal cui-shadow-light-blue cui-animate-hover-up" rel="nofollow">360 图床</a> <input type="file" id="file" name="file" onchange="sc($("#imgType").attr("imgType"))" style="display:none" accept="image/*"></form><br><div class="imgContent" id="imgContent"><div id="images"></div><br><div id="imgurl"><br><br><div class="cui-bubble cui-bubble-word cui-normal cui-shadow-light-blue">图片URL地址</div><br><br><div class="cui-input cui-input-border-bottom cui-input-color-normal cui-shadow-light-blue"><input placeholder=".cui-input-color-normal" onclick="oCopy(this)" value="" id="Imgs_url"></div><br><br><div class="cui-bubble cui-bubble-word cui-normal cui-shadow-light-blue">HTML 格式</div><br><br><div class="cui-input cui-input-border-bottom cui-input-color-normal cui-shadow-light-blue"><input placeholder=".cui-input-color-normal" onclick="oCopy(this)" value="" id="Imgs_html"></div><br><br><div class="cui-bubble cui-bubble-word cui-normal cui-shadow-light-blue">UBB 格式</div><br><br><div class="cui-input cui-input-border-bottom cui-input-color-normal cui-shadow-light-blue"><input placeholder=".cui-input-color-normal" onclick="oCopy(this)" value="" id="Imgs_Ubb"></div><br><br><div class="cui-bubble cui-bubble-word cui-normal cui-shadow-light-blue">MARKDOWN 格式</div><br><br><div class="cui-input cui-input-border-bottom cui-input-color-normal cui-shadow-light-blue"><input placeholder=".cui-input-color-normal" onclick="oCopy(this)" value="" id="Imgs_markdown"></div><br><br></div></div><div class="cui-promptbar cui-shadow-light-blue cui-normal"><div class="cui-promptbar-text">点击文本框即可快速复制</div></div></div></div></body><script type="text/javascript">function update(a){$("#file").val(""),$("#imgType").attr({imgType:a}),file.click()}function sc(a){if(!a)return!1;var e=$("#file").val();$("#pg").val("0");var r=e.split("\\"),i=r[r.length-1],t=i.lastIndexOf("."),s=i.substring(t,i.length).toUpperCase(),n=$("#file").get(0).files[0];if(!n)return!1;var o=n.size;switch(a){case"sougou":var c=2097152;break;case"baidu":var c=2097152;break;case"so":var c=2097152;break;case"sina":var c=10485760;break;default:var c=10485760}if(".PNG"!=s&&".GIF"!=s&&".JPG"!=s&&".JPEG"!=s&&".BMP"!=s)return parent.alert("文件类型错误,请上传图片类型"),!1;if(parseInt(o)>=parseInt(c))return parent.alert("上传的文件不能超过"+c/1024/1024+"MB"),!1;$("#imgLoading").attr("src","https://ww2.sinaimg.cn/large/005BYqpgly1fxbbemsqxaj305k05k3yg.jpg");var g=new FormData($("#form1")[0]),p="f07b711396f9a05bc7129c4507fb65c5";switch(a){case"sougou":var d="https://apis.yum6.cn/api/5bd7f16aa33d7";break;case"baidu":var d="https://apis.yum6.cn/api/5bd828881f92b";break;case"so":var d="https://apis.yum6.cn/api/5bd90750c3f77";break;case"sina":var d="https://apis.yum6.cn/api/5bd44dc94bcfc";break;default:return!1}return $("#progress").show(),$.ajax({url:d+"?token="+p,type:"POST",data:g,dataType:"JSON",processData:!1,contentType:!1,xhr:function(){var a=$.ajaxSettings.xhr();return onprogress&&a.upload?(a.upload.addEventListener("progress",onprogress,!1),a):void 0}}).done(function(e){if("1"==e.code){var r="";if("sina"!=a)var i=e.data;else var i=e.data.url;r+='<img src="'+i+'" name="sinaimg" id="sinaimg" class="cui-animate-hover-up cui-shadow-light-blue">',$("#Imgs_url").val(i),$("#Imgs_html").val('<img src="'+i+'"/>'),$("#Imgs_Ubb").val("[img]"+i+"[/img]"),$("#Imgs_markdown").val("![]("+i+")"),$("#images").html(r),$("#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(e.msg)}),!1}function onprogress(a){var e=a.loaded,r=a.total,i=Math.floor(100*e/r);$("#pg").val(i)}function oCopy(a){a.select(),document.execCommand("Copy"),browserRedirect()&&alert("手机可能会复制失败，请自行检查是否复制成功，建议手动复制！")}function browserRedirect(){var a=navigator.userAgent.toLowerCase(),e="ipad"==a.match(/ipad/i),r="iphone os"==a.match(/iphone os/i),i="midp"==a.match(/midp/i),t="rv:1.2.3.4"==a.match(/rv:1.2.3.4/i),s="web"==a.match(/ucweb/i),n="windows ce"==a.match(/windows ce/i),o="windows mobile"==a.match(/windows mobile/i),c="android"==a.match(/android/i);return e||r||i||t||s||n||o||c?1:void 0}$(document).ready(function(){$("#imgLoading").click(function(){$("#imgContent").toggle()})});</script>