四合一圖床上傳 - Cdn圖床,百度圖床,新浪圖床,360圖床,搜狗圖床
阿新 • • 發佈：2018-12-16
圖床
圖床一般是指儲存圖片的伺服器，有國內和國外之分。國外的圖床由於有空間距離等因素決定訪問速度很慢影響圖片顯示速度。國內也分為單線空間、多線空間和cdn加速三種。
網上有很多很多圖床比如：百度圖床,新浪圖床,360圖床,搜狗圖床,SM圖床圖床等等……
小杰給大家帶來的是百度圖床,新浪圖床,360圖床,搜狗圖床，四合一版本
簡約的前端上傳模版，ajax方式提交圖片到API裡面，能快速獲取圖片的外鏈
全部程式碼
<!-- 四合一圖床上傳，支援百度(2M)、搜狗(2M)、360(2M)、新浪(10M)圖片上傳 作者：Youngxj 部落格：https://www.youngxj.cn Apis:https://wiki.yum6.cn 宣告：前端無版權，上傳Js由Youngxj編寫，呼叫YoungxjApis介面 --> <!DOCTYPE html> <html lang='zh-cn'> <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 class="imgType" 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 class="imgContent" 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 youngxj * @date 2018-11-17 * @url https://www.youngxj.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(''); $('#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>
PS：儲存為html格式用瀏覽器開啟即可使用。