구글 블로그스팟 또는 구글드라이브 이용해서

2018.11.09 16:07

440

CMS/프레임워크	Rhymix 1.9
개발 언어	PHP 7.2

이미지를 업로드하는것을 해보려고 하는데요

혹시 어려울까요?

정보같은게 많이 안나와있어서요ㅠㅠ

물론 라이믹스에 붙여보려고 합니다.

도토리묵

2018.11.09 17:02 #1107781

<html>

<head>
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <style>
    #converter {
      padding: 20px 20px;
      border-radius: 5px;
      background-color: #f8f8f8;
      width: 100%;
      padding: 15px 15px;
    }
    #converter textarea {
      display: block;
      white-space: wrap;
      border: 1px solid #888;
      border-radius: 5px;
      margin-bottom: 10px;
      padding: 5px 5px;
      width: 100%;
      height: 60px;
    }
    #converter label {
      font-weight: bold;
      color: #333;
    }
    #converter button {
      font-weight: bold;
    }
    #btn-convert {
      width: 100%;
    }
    #convert-result {
      margin-top: 20px;
    }
  </style>
</head>

<body>
  <div id="converter">
    <label>Google Drive path</label>
    <textarea id="gd-url" placeholder="Input Google Drive Url"></textarea>
    <button id="btn-convert" class="btn btn-primary">Make Google Drive Path Linkable</button>
    <div id="convert-result">
      <label for="result">Linkable Image path</label>
      <textarea id="result" name="result" readonly></textarea>
      <button id="btn-save-result-cb" class="btn btn-success pull-right" data-clipboard-target="#result">
        <span class="glyphicon glyphicon-copy" aria-hidden="true"></span>
        Save to Clipboard
      </button>
      <br><br>
      <label for="result-img-tag">Image Tag</label>
      <textarea id="result-img-tag" name="result" readonly></textarea>
      <button id="btn-save-result-img-tag-cb" class="btn btn-success pull-right" data-clipboard-target="#result-img-tag">
        <span class="glyphicon glyphicon-copy" aria-hidden="true"></span>
        Save to Clipboard
      </button>
    </div>
    <br><br><br>
      <p align="center">
      <b>Preview image</b>
      </p>
    <p align="center">
      <img id="preview" alt="image preview" src='https://www.google.com/drive/static/images/drive/logo-drive.png' class="img-thumbnail" style="max-width: 200px"/><br>
    </p>

  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
  <script>
    var gdUrl = $("#gd-url");
    $("#btn-convert").on("click", function(event) {
      if (!isValidUrl(gdUrl.val())) {
        alert("You have inputted invalid path.");
        gdUrl.val("");
        return;
      }
      var gdId = getParameterByName("id", gdUrl.val());
      var prefix = "http://drive.google.com/uc?export=view&id=";
      $("#result").val(prefix + gdId);
      $("#result-img-tag").val(
        "<img src='" +
        prefix + gdId +
        "' /><br>");
      $("#preview").attr("src", prefix + gdId);
    });
    var clipboard = new Clipboard('.btn');
    clipboard.on('success', function(e) {
      console.info('Action:', e.action);
      console.info('Text:', e.text);
      console.info('Trigger:', e.trigger);
      e.clearSelection();
    });
    clipboard.on('error', function(e) {
      console.error('Action:', e.action);
      console.error('Trigger:', e.trigger);
    });
    // validity check. ref: https://gist.github.com/jlong/2428561
    function isValidUrl(url) {
      // to be impl...
      var parser = document.createElement('a');
      parser.href = url;
      if(url === '' || parser.hostname !== "drive.google.com" || !parser.search.includes("?id="))
        return false;
      return true;
    }
    function getParameterByName(name, url) {
      if (!url) url = window.location.href;
      name = name.replace(/[\[\]]/g, "\\$&");
      var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
      if (!results) return null;
      if (!results[2]) return '';
      return decodeURIComponent(results[2].replace(/\+/g, " "));
    }
  </script>
</body>

</html>

이 코드를 참조하세요.

추천 2