이미지를 업로드하는것을 해보려고 하는데요
혹시 어려울까요?
정보같은게 많이 안나와있어서요ㅠㅠ
물론 라이믹스에 붙여보려고 합니다.
<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>
이 코드를 참조하세요.
<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>이 코드를 참조하세요.