之前为大家分享了利用百度和新浪图片上传接口制作图床的方法，现在好像都不能用了。今天为大家分享一款利用阿里巴巴来做图床的方法。
首先我们来看看代码最终效果
测试是正常上传完美无错的
阿里巴巴图床代码
<!DOCTYPEhtml><html><head><metaname="referrer"content="no-referrer"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1,user-scalable=no"><title>我的站长站免费图床-阿里巴巴稳定图片外链www.0du123.com</title><metaname="keywords"content="uomg,优启梦,新浪图床,淘宝图床,图片外链,稳定图床,免费图床,网络图片,图片库,相册,网络相册,批量上传,批量生成"><metaname="description"itemprop="description"content="优启梦永久免费图床，稳定图片外链；支持批量上传,即时预览,不限制流量,不限制外链数,永久保存,阿里巴巴图片服务器,全网CDN图床,高速稳定,支持网页,手机上传,无需插件,支持JPG,GIF,PNG等文件格式,微博图床,土豆是个好图床"/><linkrel="stylesheet"href="https://lib.baomitu.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><linkrel="stylesheet"href="https://lib.baomitu.com/prettify/latest/prettify.css"><scriptrel="stylesheet"src="https://lib.baomitu.com/layer/3.1.1/mobile/layer.js"></script><styletype="text/css">body{font-family:-apple-system,BlinkMacSystemFont,"SegoeUI",Roboto,"HelveticaNeue",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,iOS4.2+*/url('//at.alicdn.com/t/webfont_bar76uyhrpd.svg#思源黑体-极细')format('svg');/*iOS4.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);}.jumbotroninput[type=file]{opacity:0;width:102px;height:31px;position:absolute;display:inline-block;}.preview{color:#fff;}.previewimg{max-width:10%;}.previewp{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><divclass="span12headertext-center"><p>©我的站长站免费图床</p><p>阿里巴巴图片外链服务稳定不掉线免费使用</p></div><divclass="col-md-8col-xs-10jumbotron"style="margin:auto;"><div><ahref="http://www.wdzzz.com"><buttonclass="btnbtn-primarybtn-sm">我的站长站</button></a><inputtype="file"accept="image/*"multiple><buttontype="button"class="btnbtn-primarybtn-sm">选择本地图片</button><buttontype="button"class="btnbtn-primarybtn-sm"data-toggle="modal"data-target="#url_upload_model">上传远程图片</button></div><hr><textareaid="url-res-txt"rows="5"placeholder="上传后的图片外链地址将显示在此处，下方会同时显示外链地址和预览图。"></textarea><div><hr></div><span><b>温馨提示:</b>本站不存储且无权管理上传的图源，图源均存放在新浪服务器，切勿上传违反法规图源，否则后果自负。</span></div><divclass="footertext-center"><atarget="_blank">©2019Poweredby我的站长站.</a></div></div></div><divid="url_upload_model"class="modalfade"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true"><div><div><div><h4id="myModalLabel">上传远程图片</h4></div><div><p>请在下方输入远程图片地址~每行一个~</p><textareaname="urls"rows="3"id="urls"></textarea></div><div><buttontype="button"class="btnbtn-default"data-dismiss="modal">关闭</button><buttontype="button"class="btnbtn-primary"onClick="url_upload();">提交</button></div></div></div></div><scriptsrc="https://lib.baomitu.com/jquery/3.4.0/jquery.min.js"type="text/javascript"></script><scriptsrc="https://lib.baomitu.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"type="text/javascript"></script><scripttype="text/javascript">varurl='https://api.uomg.com/api/image.ali';$(document).ready(function(){$("input[type='file']").change(function(e){file_upload(this.files)});varobj=$('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)});});functionfile_upload(files){if(files.length==0)returnalert('请选择图片文件！');for(varj=0,len=files.length;j<len;j++){console.log(files[j]);letimageData=newFormData();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><imgsrc="'+result.imgurl+'"><code>'+result.imgurl+'</code></div>');}else{layer.msg('第'+j+'个图片上传失败');}},//图片上传失败error:function(){console.log('图片上传失败');}});}}functionurl_upload(){varurls=$('#urls').val();if(urls==false)returnalert('请输入图片链接！');varUrlArr=urls.split("n");$('#url_upload_model').modal('hide');for(varj=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><imgsrc="'+result.imgurl+'"><code>'+result.imgurl+'</code></div>');}else{layer.msg('第'+j+'个图片上传失败');}console.log(result);});}}</script></body></html>
以上代码大家可以根据要求自行修改。
本文收集自网络，由本站搜集发布，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系本站核实处理。如需转载，请注明文章来源。
© 版权声明
THE END
