javascript - JavaScript アプレットを JavaScript ボタンに変換する

Question

このタイトルは、私の質問に対して 100% 正確ではない可能性があります。その場合は、あらかじめお詫び申し上げます。これが私の問題です。アップロードせずにクリップボードから画像を貼り付けることができるこのクールなアプレットを見つけました。しかし、私のサイトでは明示的に記述された HTML を使用していないため、このアプレットを挿入する方法がわかりません。たとえば、画像を入力するために通常使用する種類の [アップロード] ボタンのコードを次に示します。

getUploadControl: function(data) {
        var uploadData = data.uploadData || {},
                    resultHandler = generateCallbackHandler({
                        success: data.onSuccess,
                        error: data.onError,
                        busyMethod: noop
                    }),
                    eventHandler = function(e) {
                        var jsonResponse = parseJSON(e.XMLHttpRequest.responseText);
                        resultHandler(jsonResponse);
                    };
        return extend(true, {
            type: "upload",
            options: {
                async: {
                    saveUrl: window.CaledonianAPIWebServiceRoot + "WriteFile.aspx"
                },
                multiple: false,
                upload: function(e) {
                    var ud = copyNestedProperties({}, uploadData);
                    api.addAuthToData(ud);
                    e.data = ud;
                },
                success: eventHandler,
                error: eventHandler
            }
        }, data);
    },

SUPA Appletを使用して、このような同様のボタンを作成したいと思います。これがアプレットのデモです。

Supa.js のソース コードをダウンロードしました。これはそれほど長くはありません。

function Supa() {
this.ping = function (supaApplet) {
    try {
        // IE will throw an exception if you try to access the method in a 
        // scalar context, i.e. if( supaApplet.pasteFromClipboard ) ...
        return supaApplet.ping();
    } catch (e) {
        return false;
    }
};

this.ajax_post = function (actionUrl, bytes, fieldname_filename, filename, params) {
    // some constants for the request body
    //FIXME: make sure boundaryString is not part of bytes or the form values
    var boundaryString = 'AaB03x' + parseInt(Math.random() * 9999999, 10),
        boundary = '--' + boundaryString,
        cr = '\r\n',
  body,
  i,
  isAsync,
  xrequest;

    // sanity checks
    if (!fieldname_filename || fieldname_filename === "") {
        throw "Developer Error: fieldname_filename not set or empty";
    }

    if (!filename || filename === "") {
        throw "Filename required";
    }

    // build request body
    body = '';
    body += boundary + cr;

    if (isArray(params)) {
        for (i = 0; i < params.length; i += 1) {
            body += "Content-disposition: form-data; name=\"" + escape(params[i].name) + "\";" + cr;
            body += cr;
            body += encodeURI(params[i].value) + cr;
            body += boundary + cr;
        }
    }

    // add the screenshot as a file
    body += "Content-Disposition: form-data; name=\"" + escape(fieldname_filename) + "\"; filename=\"" + encodeURI(filename) + "\"" + cr;
    body += "Content-Type: application/octet-stream" + cr;
    body += "Content-Transfer-Encoding: base64" + cr;
    body += cr;
    body += bytes + cr;
    // last boundary, no extra cr here!
    body += boundary + "--" + cr;

    // finally, the Ajax request
    isAsync = false;
    xrequest = new XMLHttpRequest();
    xrequest.open("POST", actionUrl, isAsync);

    // set request headers
    xrequest.setRequestHeader("Content-Type", "multipart/form-data; charset=UTF-8; boundary=" + boundaryString);
    xrequest.send(body);

    return xrequest.responseText;
};
}

function supa() {
    return new Supa();
}

私の質問は、このライブラリを貼り付けプロセスに使用する同様のウィジェットを作成するにはどうすればよいですか? paste() メソッドは、先ほど参照したデモのソース HTML にありますが、メイン ファイルである Supa.js にはありません。さらに、私は HTML を使用していないので、すべてのコードを 1 つに結合する必要があるのでしょうか? とにかく、私を正しい軌道に乗せるために、どんな助けも大歓迎です。