影子论坛

搜索

[html] 分享一下影子论坛自用的html单文件图床

[复制链接]
管理员   shadow  发表于 2020-3-16 22:48:52 | 显示全部楼层 |阅读模式

限时注册,成为会员后有更多权益

您需要 登录 才可以下载或查看,没有帐号?注册

x
微信图片_20200316222433.png

大概长这样子
代码也很少

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta name="referrer" content="no-referrer"/>
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  8. <title>影子论坛免费图床</title>
  9. <meta name="keywords" content="新浪图床,淘宝图床,图片外链,稳定图床,免费图床,网络图片,图片库,相册,网络相册,批量上传,批量生成">
  10. <meta name="description" itemprop="description" content="影子论坛免费图床,稳定图片外链;支持批量上传,即时预览,不限制流量,不限制外链数,永久保存,阿里巴巴图片服务器,全网CDN图床,高速稳定,支持网页,手机上传,无需插件,支持JPG,GIF,PNG等文件格式,微博图床"/>
  11. <link rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  12. <link rel="stylesheet" href="https://lib.baomitu.com/prettify/latest/prettify.css">
  13. <script rel="stylesheet" src="https://lib.baomitu.com/layer/3.1.1/mobile/layer.js"></script>
  14. <style type="text/css">
  15.     body{font-family:-apple-system,BlinkmacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,'sans-serif';background: url(https://api.uomg.com/api/image.lofter?format=images); background-size: cover;}
  16.     @font-face {font-family: 'webfont_2';
  17.         src: url('//at.alicdn.com/t/webfont_bar76uyhrpd.eot'); /* IE9*/
  18.         src: url('//at.alicdn.com/t/webfont_bar76uyhrpd.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  19.         url('//at.alicdn.com/t/webfont_bar76uyhrpd.woff') format('woff'), /* chrome、firefox */
  20.         url('//at.alicdn.com/t/webfont_bar76uyhrpd.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, ios 4.2+*/
  21.         url('//at.alicdn.com/t/webfont_bar76uyhrpd.svg#思源黑体-极细') format('svg'); /* iOS 4.1- */
  22.     }
  23.     .text-center{text-align: center;}
  24.     .text-white{color: #FFF;}
  25.     .header,.footer{margin: 30px;color:#fff;}
  26.     .title1{font-size: 20px;}
  27.     .title2{font-size: 24px;font-family:"webfont_2" !important;}
  28.     .jumbotron{margin: auto;text-align: center;background-color: rgba(255, 255, 255, .3);}
  29.     .jumbotron input[type=file] {opacity:0;width:102px;height:31px;position:absolute;display:inline-block;}
  30.     .preview {color: #fff;}
  31.     .preview img {max-width: 10%;}
  32.     .preview p {word-break: break-all;word-wrap: break-word;font-size: 13px !important;}
  33.     .form-control:focus{background-color: rgba(255, 255, 255, .3);}
  34. </style>
  35. </head>
  36. <body>
  37.     <div class="container-fluid">
  38.         <div class="row-fluid">
  39.             <div class="span12 header text-center">
  40.                 <p class="title1">©影子论坛 www.shadow-forum.com</p>
  41.                 <p class="title2">图片外链服务 稳定不掉线 免费使用</p>
  42.             </div>
  43.             <div class="col-md-8 col-xs-10 jumbotron" style="margin:auto;">
  44.                 <div class="mselector">
  45.                     <input type="file" accept="image/*" multiple>
  46.                     <button type="button" class="btn btn-primary btn-sm">选择本地图片</button>
  47.                     <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#url_upload_model">上传远程图片</button>                  
  48.                 </div><hr>
  49.                 <textarea id="url-res-txt" class="form-control" rows="5" placeholder="上传后的图片外链地址将显示在此处,下方会同时显示外链地址和预览图。"></textarea>
  50.                 <div class="preview">
  51.                     <hr>
  52.                 </div>
  53.                 <span class="title1"><b>温馨提示:</b> 本站不存储且无权管理上传的图源,图源均存放在第三方服务器,切勿上传违反法规图源,否则后果自负。</span>
  54.             </div>
  55.             <div class="footer text-center">
  56.                 <a target="_blank" class="title1">© 2019 Powered by 影子论坛.</a>
  57.             </div>
  58.         </div>
  59.     </div>
  60.     <div id="url_upload_model" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  61.             <div class="modal-dialog">
  62.                     <div class="modal-content">
  63.                             <div class="modal-header">
  64.                                     <h4 class="modal-title" id="myModalLabel">上传远程图片</h4>
  65.                             </div>
  66.                             <div class="modal-body">
  67.                                     <p class="lead">
  68.                                             请在下方输入远程图片地址~每行一个~
  69.                                     </p>
  70.                                     <textarea class="form-control" name="urls" rows="3" id="urls"></textarea>
  71.                             </div>
  72.                             <div class="modal-footer">
  73.                                     <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  74.                                     <button type="button" class="btn btn-primary" onclick="url_upload();">提交</button>
  75.                             </div>
  76.                     </div>
  77.             </div>
  78.     </div>
  79.     <script src="https://lib.baomitu.com/jquery/3.4.0/jquery.min.js" type="text/javascript"></script>
  80.     <script src="https://lib.baomitu.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js" type="text/javascript"></script>
  81.     <script type="text/javascript">
  82.         var url = 'https://api.uomg.com/api/image.ali';
  83.         $(document).ready(function() {
  84.             $("input[type='file']").change(function(e) {
  85.                 file_upload(this.files)
  86.             });
  87.             var obj = $('body');
  88.             obj.on('dragenter', function(e) {
  89.                 e.stopPropagation();
  90.                 e.preventDefault()
  91.             });
  92.             obj.on('dragover', function(e) {
  93.                 e.stopPropagation();
  94.                 e.preventDefault()
  95.             });
  96.             obj.on('drop', function(e) {
  97.                 e.preventDefault();
  98.                 file_upload(e.originalEvent.dataTransfer.files)
  99.             });
  100.         });
  101.         function file_upload(files){
  102.             if (files.length == 0) return alert('请选择图片文件!');
  103.             for(var j = 0,len = files.length; j < len; j++){
  104.                 console.log(files[j]);
  105.                 let imageData = new FormData();
  106.                 imageData.append("file", 'multipart');
  107.                 imageData.append("Filedata", files[j]);
  108.                 $.ajax({
  109.                     url: url,
  110.                     type: 'POST',
  111.                     data: imageData,
  112.                     cache: false,
  113.                     contentType: false,
  114.                     processData: false,
  115.                     dataType: 'json',
  116.                     // 图片上传成功
  117.                     success: function (result) {
  118.                         if (result.code == 1){
  119.                             $('.preview').append('<div><img src="'+result.imgurl+'" ><code class="title1">'+result.imgurl+'</code></div>');
  120.                         }else{
  121.                             layer.msg('第'+j+'个图片上传失败');
  122.                         }
  123.                     },
  124.                     // 图片上传失败
  125.                     error: function () {
  126.                         console.log('图片上传失败');
  127.                     }
  128.                 });
  129.             }
  130.         }
  131.         function url_upload(){
  132.             var urls = $('#urls').val();
  133.             if (urls == false) return alert('请输入图片链接!');
  134.             var UrlArr = urls.split("\n");
  135.             $('#url_upload_model').modal('hide');
  136.             for(var j = 0,len = UrlArr.length; j < len; j++){
  137.                 console.log(UrlArr[j]);
  138.                 $.getJSON(url, {imgurl: UrlArr[j]}, function(result, textStatus) {
  139.                     if (result.code == 1){
  140.                         $('.preview').append('<div><img src="'+result.imgurl+'" ><code class="title1">'+result.imgurl+'</code></div>');
  141.                     }else{
  142.                         layer.msg('第'+j+'个图片上传失败');
  143.                     }
  144.                     console.log(result);
  145.                 });
  146.             }
  147.         }
  148.     </script>
  149. </body>
  150. </html>
复制代码


免责声明:
影子论坛所发布的一切内容仅限用于学习和研究目的,用于商业或者非法用途,否则一切后果由用户自负。
请支持正版得到更好的正版服务。如有侵权请邮件与我们联系处理。Mail To:swatxhim@outlook.com


主题推荐

回复

使用道具 举报

vip   木少新秀实名认证  发表于 2020-3-17 07:36:48 来自手机 | 显示全部楼层
这个网址是多少
回复 支持 反对

使用道具 举报

 楼主| 管理员   shadow  发表于 2020-3-17 08:52:55 | 显示全部楼层

影子论坛导航栏最右边有个小小的菜单,三条横线,鼠标放上去就能看到。
你也可以直接访问新版https://www.shadow-forum.com/tools/figurebed/index.php
或者你也可以把本帖子的代码拷贝,在本地生成html文件,在本地也可以使用。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表