阿里巴巴在线图床免费图片上传HTML代码

阿里巴巴在线图床免费图片上传HTML代码,第1张

<!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>免费图床 - 阿里巴巴稳定图片外链服务!</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>© jnsys.cn</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>


转载请说明出处 内容投诉
九牛网 » 阿里巴巴在线图床免费图片上传HTML代码

发表评论

欢迎 访客 发表评论

定制开发服务!

技术支持 联系我们