阿里巴巴在线图床免费图片上传HTML网站源码

    • 内容
    • 相关

    阿里巴巴在线图片上传源码纯单页模板,CSS全部外链化,加快访问速度。

    现在新浪图床不能用了,我们试试用阿里巴巴的图床看。

    <!DOCTYPE html>
    <html lang="zh-cn">
    <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>优启梦免费图床 - 阿里巴巴稳定图片外链服务 - https://www.vipletao.cn</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 class="container-fluid">
            <div class="row-fluid">
                <div class="span12 header text-center">
                    <p class="title1">© www.vipletao.cn</p>
                    <p class="title2">阿里巴巴图片外链服务 稳定不掉线 免费使用</p>
                </div>
                <div class="col-md-8 col-xs-10 jumbotron" style="margin:auto;">
                    <div class="mselector">
                        <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" class="form-control" rows="5" placeholder="上传后的图片外链地址将显示在此处,下方会同时显示外链地址和预览图。"></textarea>
                    <div class="preview">
                        <hr>
                    </div>
                    <span class="title1"><b>温馨提示:</b> 本站不存储且无权管理上传的图源,图源均存放在新浪服务器,切勿上传违反法规图源,否则后果自负。</span>
                </div>
                <div class="footer text-center">
                    <a target="_blank" class="title1">© 2019 Powered by www.vipletao.cn</a>
                </div>
            </div>
        </div>
        <div id="url_upload_model" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        	<div class="modal-dialog">
        		<div class="modal-content">
        			<div class="modal-header">
        				<h4 class="modal-title" id="myModalLabel">上传远程图片</h4>
        			</div>
        			<div class="modal-body">
        				<p class="lead">
        					请在下方输入远程图片地址~每行一个~
        				</p>
        				<textarea class="form-control" name="urls" rows="3" id="urls"></textarea>
        			</div>
        			<div class="modal-footer">
        				<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 class="title1">'+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 class="title1">'+result.imgurl+'</code></div>');
                        }else{
                            layer.msg('第'+j+'个图片上传失败');
                        }
                        console.log(result);
                    });
                }
            }
        </script>
    </body>
    </html>
    每日打开支付宝首页搜“1056355”领红包

    有好的文章或资源希望【唯品乐淘】帮助分享推广,猛戳这里我要投稿

  • 本文标签:

    版权声明:若无特殊注明,本文皆为《淘优折》原创,转载请保留文章出处。

    本文链接:阿里巴巴在线图床免费图片上传HTML网站源码 - https://www.vipletao.cn/post-2342.html

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    未显示?请点击刷新