欢迎光临 - 我的站长站,本站所有资源仅供学习与参考,禁止用于商业用途或从事违法行为!

经验分享

利用阿里巴巴图片外链来制作免费图床

经验分享 我的站长站 2019-06-16 共612人阅读

之前为大家分享了利用百度和新浪图片上传接口制作图床的方法,现在好像都不能用了。今天为大家分享一款利用阿里巴巴来做图床的方法。

首先我们来看看代码最终效果

利用阿里巴巴图片外链来制作免费图床

测试是正常上传完美无错的

阿里巴巴图床代码

<!DOCTYPE html>
<html>
<head>
<meta name="referrer" content="no-referrer"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>我的站长站免费图床 - 阿里巴巴稳定图片外链www.0du123.com</title>
<meta name="keywords" content="uomg,优启梦,新浪图床,淘宝图床,图片外链,稳定图床,免费图床,网络图片,图片库,相册,网络相册,批量上传,批量生成">
<meta name="description" itemprop="description" content="优启梦永久免费图床,稳定图片外链;支持批量上传,即时预览,不限制流量,不限制外链数,永久保存,阿里巴巴图片服务器,全网CDN图床,高速稳定,支持网页,手机上传,无需插件,支持JPG,GIF,PNG等文件格式,微博图床,土豆是个好图床"/>
<link rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://lib.baomitu.com/prettify/latest/prettify.css">
<script rel="stylesheet" src="https://lib.baomitu.com/layer/3.1.1/mobile/layer.js"></script>
<style type="text/css">
    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;}
    @font-face {font-family: 'webfont_2';
        src: url('//at.alicdn.com/t/webfont_bar76uyhrpd.eot'); /* IE9*/
        src: url('//at.alicdn.com/t/webfont_bar76uyhrpd.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('//at.alicdn.com/t/webfont_bar76uyhrpd.woff') format('woff'), /* chrome、firefox */
        url('//at.alicdn.com/t/webfont_bar76uyhrpd.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url('//at.alicdn.com/t/webfont_bar76uyhrpd.svg#思源黑体-极细') format('svg'); /* iOS 4.1- */
    }
    .text-center{text-align: center;}
    .text-white{color: #FFF;}
    .header,.footer{margin: 30px;color:#fff;}
    .title1{font-size: 20px;}
    .title2{font-size: 24px;font-family:"webfont_2" !important;}
    .jumbotron{margin: auto;text-align: center;background-color: rgba(255, 255, 255, .3);}
    .jumbotron input[type=file] {opacity:0;width:102px;height:31px;position:absolute;display:inline-block;}
    .preview {color: #fff;}
    .preview img {max-width: 10%;}
    .preview p {word-break: break-all;word-wrap: break-word;font-size: 13px !important;}
    .form-control:focus{background-color: rgba(255, 255, 255, .3);}
</style>
</head>
<body>
    <div>
        <div>
            <div class="span12 header text-center">
                <p>© 我的站长站免费图床</p>
                <p>阿里巴巴图片外链服务 稳定不掉线 免费使用</p>
            </div>
            <div class="col-md-8 col-xs-10 jumbotron" style="margin:auto;">
                <div>
<a href="http://www.wdzzz.com"><button class="btn btn-primary btn-sm">我的站长站</button></a>
                    <input type="file" accept="image/*" multiple>
                    <button type="button" class="btn btn-primary btn-sm">选择本地图片</button>
                    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#url_upload_model">上传远程图片</button>                   
                </div><hr>
                <textarea id="url-res-txt" rows="5" placeholder="上传后的图片外链地址将显示在此处,下方会同时显示外链地址和预览图。"></textarea>
                <div>
                    <hr>
                </div>
                <span><b>温馨提示:</b> 本站不存储且无权管理上传的图源,图源均存放在新浪服务器,切勿上传违反法规图源,否则后果自负。</span>
            </div>
            <div class="footer text-center">
                <a target="_blank">© 2019 Powered by 我的站长站.</a>
            </div>
        </div>
    </div>
    <div id="url_upload_model" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div>
     <div>
     <div>
     <h4 id="myModalLabel">上传远程图片</h4>
     </div>
     <div>
     <p>
     请在下方输入远程图片地址~每行一个~
     </p>
     <textarea name="urls" rows="3" id="urls"></textarea>
     </div>
     <div>
     <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
     <button type="button" class="btn btn-primary" onClick="url_upload();">提交</button>
     </div>
     </div>
     </div>
    </div>
    <script src="https://lib.baomitu.com/jquery/3.4.0/jquery.min.js" type="text/javascript"></script>
    <script src="https://lib.baomitu.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var url = 'https://api.uomg.com/api/image.ali';
        $(document).ready(function() {
            $("input[type='file']").change(function(e) {
                file_upload(this.files)
            });
            var obj = $('body');
            obj.on('dragenter', function(e) {
                e.stopPropagation();
                e.preventDefault()
            });
            obj.on('dragover', function(e) {
                e.stopPropagation();
                e.preventDefault()
            });
            obj.on('drop', function(e) {
                e.preventDefault();
                file_upload(e.originalEvent.dataTransfer.files)
            });
        });
        function file_upload(files){
            if (files.length == 0) return alert('请选择图片文件!');
            for(var j = 0,len = files.length; j < len; j++){
                console.log(files[j]);
                let imageData = new FormData();
                imageData.append("file", 'multipart');
                imageData.append("Filedata", files[j]);
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: imageData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    // 图片上传成功
                    success: function (result) {
                        if (result.code == 1){
                            $('.preview').append('<div><img src="'+result.imgurl+'" ><code>'+result.imgurl+'</code></div>');
                        }else{
                            layer.msg('第'+j+'个图片上传失败');
                        }
                    },
                    // 图片上传失败
                    error: function () {
                        console.log('图片上传失败');
                    }
                });
            }
        }
        function url_upload(){
            var urls = $('#urls').val();
            if (urls == false) return alert('请输入图片链接!');
            var UrlArr = urls.split("n");
            $('#url_upload_model').modal('hide');
            for(var j = 0,len = UrlArr.length; j < len; j++){
                console.log(UrlArr[j]);
                $.getJSON(url, {imgurl: UrlArr[j]}, function(result, textStatus) {
                    if (result.code == 1){
                        $('.preview').append('<div><img src="'+result.imgurl+'" ><code>'+result.imgurl+'</code></div>');
                    }else{
                        layer.msg('第'+j+'个图片上传失败');
                    }
                    console.log(result);
                });
            }
        }
    </script>
</body>
</html>

以上代码大家可以根据要求自行修改。

相关专题
外链
外链
2020-11-08 245

外链专题聚合了权重关于网站外链相关的seo外链工具,包含外链发布全发软件, 网站外链优化教程等等.

标签 html教程
相关推荐
  • html教程
  • HTML5视频自动循环播放方法

    如果需要在网页中添加视频,可以参考下面的代码,支持MP4视频自动循环播放。纯HTML5视频自动循环播放<!DOCTYPE HTML><html><body><video controls="controls" loop="loop" autoplay="autoplay" style="width:100%;vertical-align:middle;"><source s...

    经验分享 1980 3年前
  • html入门教程之a标签的使用方法

    一:什么是a标签?a标签的作用:就是页面之间的跳转路由,通网问路的通道。a标签的格式:<a href="链接">展示内容</a><a href="http://www.wdzzz.com/">我的站长站</a>二:a标签的属性a标签中有一个target属性,这个属性的作用就是专门用于控制如何跳转的_blank于...

    经验分享 199 3年前
  • HTML使用clip-path制作地图
    HTML使用clip-path制作地图

    clip-path制作的地图是指地理上的地图,不是指网站地图!大天朝的地图想必每个中国人都知道,也经常见到。站长应该见得特别多了,特别是在检查网站速度的时候,检查平台会以一张地图的形式展示出来,那么这...

    经验分享 172 3年前
  • HTML实现title标签换行显示方法

    HTML实现title标签换行显示方法,在换行的地方添加&#10;或&#13;实现换行。<tr title="指标名称:${target.intename}&#10;指标说明:${target.remark}&#13;指标名称:${target.intename}">这样就可以了,超级简单,大家可以试试。...

    经验分享 135 3年前
  • HTML5视频播放video标签使用方法

    如何使用视频video标签在网页里嵌入HTML5音频播放器和视频播放器的方法非常简单:<video src="http://www.wdzzz.com/theora_testsuite/320x240.ogg" controls autoplay loop>Your browser does not support the <code>video</code> element.</video>...

    经验分享 249 3年前