질문/조언질답게시판
Extra Form
PHP PHP 7.2
CMS Rhymix

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

 

혹시 어려울까요?

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

 

 

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

 

  • profile
    <html>
    
    <head>
      <!-- Latest compiled and minified CSS -->
      <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>

     

    이 코드를 참조하세요.


서버에 요청 중입니다. 잠시만 기다려 주십시오...