阿里图床在线上传外链html单页面

index.html

阿里巴巴图片外链服务

续新浪图片不能用后,大家可以试试这个

阿里巴巴单页面图片上传源码。

大小8k调用上传

图片稳定不掉线

源码文件

<!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.svdae.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, .30);} .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, .30);}</style></head><body> <div> <div> <div class="span12 header text-center"> <p>© www.svdae.com</p> <p>阿里巴巴图片外链服务 稳定不掉线 免费使用</p> </div> <div class="col-md-8 col-xs-10 jumbotron" style="margin:auto;"> <div> <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>

下载地址:

文件名称:阿里巴巴图床

文件大小:3.7 K

支持Ctrl+Enter提交