javascript - Imgur 上传添加到输入表单

Question

我已在 HTML 中创建了此代码

<div class="margin-bottom"><p class="title"><strong>Picture</strong></p>
<div class="textbox-group margin-bottom">
<span class="textbox-group-addon pointer" id="basic-addon"><div class="dropzones"><div class="info"><i class="fa fa-upload" title="Picture  Preview"></i></div></div></span>
<input id="preview" class="textbox" name="preview" value="" type="text" aria-describedby="basic-addon">
</div><div class="loading-modal text-center"><i class="fa fa-spinner fa-pulse fa-3x fa-fw"><span class="sr-only"></span></i> Uploading...</div>

这是我的 imguruploads.js

/* Imgur Upload Script */
(function (root, factory) {
    "use strict";
    if (typeof define === 'function' && define.amd) {
        define([], factory);
    } else if (typeof exports === 'object') {
        module.exports = factory();
    } else {
        root.Imgur = factory();
    }
}(this, function () {
    "use strict";
    var Imgur = function (options) {
        if (!this || !(this instanceof Imgur)) {
            return new Imgur(options);
        }

        if (!options) {
            options = {};
        }

        if (!options.clientid) {
            throw 'Provide a valid Client Id here: https://api.imgur.com/';
        }

        this.clientid = options.clientid;
        this.endpoint = 'https://api.imgur.com/3/image';
        this.callback = options.callback || undefined;
        this.dropzones = document.querySelectorAll('.dropzones');
        this.info = document.querySelectorAll('.info');

        this.run();
    };

    Imgur.prototype = {
        createEls: function (name, props, text) {
            var el = document.createElement(name), p;
            for (p in props) {
                if (props.hasOwnProperty(p)) {
                    el[p] = props[p];
                }
            }
            if (text) {
                el.appendChild(document.createTextNode(text));
            }
            return el;
        },
        insertAfter: function (referenceNode, newNode) {
            referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
        },
        post: function (path, data, callback) {
            var xhttp = new XMLHttpRequest();

            xhttp.open('POST', path, true);
            xhttp.setRequestHeader('Authorization', 'Client-ID ' + this.clientid);
            xhttp.onreadystatechange = function () {
                if (this.readyState === 4) {
                    if (this.status >= 200 && this.status < 300) {
                        var response = '';
                        try {
                            response = JSON.parse(this.responseText);
                        } catch (err) {
                            response = this.responseText;
                        }
                        callback.call(window, response);
                    } else {
                        throw new Error(this.status + " - " + this.statusText);
                    }
                }
            };
            xhttp.send(data);
            xhttp = null;
        },
        createDragZone: function () {
            var input;

            input = this.createEls('input', {type: 'file', className: 'input', accept: 'image/*'});

            Array.prototype.forEach.call(this.dropzones, function (zone) {
                zone.appendChild(input);
                this.status(zone);
                this.upload(zone);
            }.bind(this));
        },
        loading: function () {
            var div, i, span;

            div = this.createEls('div', {className: 'loading-modals'});
            i = this.createEls('i', {className: 'fa fa-spinner fa-pulse fa-3x fa-fw'});
            span = this.createEls('span', {className: 'sr-only'});

            div.appendChild(i);
            i.appendChild(span);
            document.body.appendChild(div);
        },
        status: function (el) {
            var div = this.createEls('div', {className: 'statuss'});

            this.insertAfter(el, div);
        },
        matchFiles: function (file, zone) {
            var status = zone.nextSibling;

            if (file.type.match(/image/) && file.type !== 'image/svg+xml') {
                document.body.classList.add('loading');
                status.classList.remove('pm_alert', 'red_alert');
                status.innerHTML = '';

                var fd = new FormData();
                fd.append('image', file);

                this.post(this.endpoint, fd, function (data) {
                    document.body.classList.remove('loading');
                    typeof this.callback === 'function' && this.callback.call(this, data);
                }.bind(this));
            } else {
                status.classList.remove('pm_alert');
                status.classList.add('red_alert');
                status.innerHTML = 'Invalid archive';
            }
        },
        upload: function (zone) {
            var events = ['dragenter', 'dragleave', 'dragover', 'drop'],
                file, target, i, len;

            zone.addEventListener('change', function (e) {
                if (e.target && e.target.nodeName === 'INPUT' && e.target.type === 'file') {
                    target = e.target.files;

                    for (i = 0, len = target.length; i < len; i += 1) {
                        file = target[i];
                        this.matchFiles(file, zone);
                    }
                }
            }.bind(this), false);

            events.map(function (event) {
                zone.addEventListener(event, function (e) {
                    if (e.target && e.target.nodeName === 'INPUT' && e.target.type === 'file') {
                        if (event === 'dragleave' || event === 'drop') {
                            e.target.parentNode.classList.remove('dropzone-dragging');
                        } else {
                            e.target.parentNode.classList.add('dropzone-dragging');
                        }
                    }
                }, false);
            });
        },
        run: function () {
            var loadingModal = document.querySelector('.loading-modal');

            if (!loadingModal) {
                this.loading();
            }
            this.createDragZone();
        }
    };

    return Imgur;
}));


var feedback = function(res) {
    textarea: '',
    document.textarea = $('#preview');
     if (res.success === true) {
        var wahaha = res.data.link.replace();
        document.text.add( wahaha );
        document.querySelector('.status').classList.add('bg-success');
        document.querySelector('.status').innerHTML = 
        '<div class="text-left">Copy dan Paste kan link gambar <i class="fa fa-hand-o-down fa-fw"></i> ke form <strong>atas</strong> <i class="fa fa-hand-o-up fa-fw"></i></div>' + '<div class="text-center scaleimages padding-topbottom"><input class="textbox image-url media-heading" value=' + wahaha + '/>' + '<img class="img" src=' + wahaha + '/>';
     }
 };

new Imgur({ 
    clientid: '3da90edf4016361', //You can change this ClientID
    callback: feedback 
});

这段代码工作得很好，但不像我想要的那样工作，我希望当图像上传成功时，链接“wahaha”添加到这个输入表单

<input id="preview" class="textbox" name="preview" value="" type="text" aria-describedby="basic-addon">

是的，上传完成后会显示输入表单，但我想要的是添加到另一个输入表单的文本

有人有办法解决这个问题吗？

Answer 1

只需添加此代码

document.getElementById('gambar_preview').value = wahaha;

一切都按照我想要的方式进行