Получить URL из Imgur API, используя JavaScript - PullRequest
Новая
       13

Получить URL из Imgur API, используя JavaScript

0 голосов
/ 06 марта 2012

Я пытаюсь использовать JavaScript для загрузки изображения в imgur по этому примеру : 

<!DOCTYPE html><meta charset="utf8"><title>Yo.</title>
<div>DROP!<button onclick="document.querySelector('input').click()">Or click</button></div>
<input style="visibility: collapse; width: 0px;" type="file" onchange="upload(this.files[0])">
<script>
/* Drag'n drop stuff */
window.ondragover = function(e) {e.preventDefault()}
window.ondrop = function(e) {e.preventDefault(); upload(e.dataTransfer.files[0]); }
function upload(file) {

    /* Is the file an image? */
    if (!file || !file.type.match(/image.*/)) return;

    /* It is! */
    document.body.className = "uploading";

    /* Lets build a FormData object*/
    var fd = new FormData(); // I wrote about it: https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/
    fd.append("image", file); // Append the file
    fd.append("key", "6528448c258cff474ca9701c5bab6927"); // Get your own key http://api.imgur.com/
    var xhr = new XMLHttpRequest(); // Create the XHR (Cross-Domain XHR FTW!!!) Thank you sooooo much imgur.com
    xhr.open("POST", "http://api.imgur.com/2/upload.json"); // Boooom!
    xhr.onload = function() {
        // Big win!
        document.querySelector("#link").href = JSON.parse(xhr.responseText).upload.links.imgur_page;
        document.body.className = "uploaded";
    }
    // Ok, I don't handle the errors. An exercice for the reader.

    /* And now, we send the formdata */
    xhr.send(fd);
}
</script>

<!-- Bla bla bla stuff ... -->

<style>
body {text-align: center; padding-top: 100px;}
div { border: 10px solid black; text-align: center; line-height: 100px; width: 200px; margin: auto; font-size: 40px; display: inline-block;}
#link, p , div {display: none}
div {display: inline-block;}
.uploading div {display: none}
.uploaded div {display: none}
.uploading p {display: inline}
.uploaded #link {display: inline}
em {position: absolute; bottom: 0; right: 0}
</style>

<p>Uploading...</p>
<a id="link">It's online!!!</a>

В этом примере ссылка на изображение вставлена ​​в ссылку и ей нравится текст «Это онлайн !!!»

Не могли бы вы помочь мне, как получить URL изображения после загрузки? Я хочу, чтобы URL-адрес отображаемого изображения (например, заменил «Он-лайн !!!» на URL-адрес) вместо того, чтобы поместить его в ссылку.

1 Ответ

2 голосов
/ 06 марта 2012

Вместо установки значения # link * href установите его значение innerHTML.Или значение innerHTML другого элемента. 

document.getElementById('link').innerHTML = 'The url';

Редактировать: См. http://jsfiddle.net/XVvyJ/1/

...