16

JavaScriptを含む単純なHTMLページを作成して、HTMLに埋め込まれた画像データとディスク外のファイルを使用してフォームPOSTを実行したいと思います。

通常のフォームデータで機能するこの投稿を見てきましたが、画像データに困惑しています。

フォーム送信のようなJavaScriptPOSTリクエスト

4

2 に答える 2

26

**更新**2014年2月**

jQueryプラグインとして利用可能な新しい改善されたバージョン： https ：//github.com/CoeJoder/jquery.image.blob

使用法：

$('img').imageBlob().ajax('/upload', {
    complete: function(jqXHR, textStatus) { console.log(textStatus); } 
});


要件

したがって、ブラウザの要件は次のとおりです。

  • Chrome：20以上
  • Firefox：13歳以上
  • Internet Explorer：10以上
  • オペラ：12.5+
  • Safari：6歳以上

注：画像はJavaScriptと同じ元の画像である必要があります。そうでない場合、ブラウザのセキュリティポリシーにより、への呼び出しが防止されますcanvas.toDataURL()（詳細については、このSOの質問を参照してください：canvas.toDataURL（）がセキュリティ例外をスローするのはなぜですか？）。その投稿への回答で説明されているように、プロキシサーバーを使用して、応答ヘッダーインジェクションを介してこの制限を回避できます。

これが以下のコードのjsfiddleです。実際のURL（'/ some / url'）に送信されていないため、エラーメッセージがスローされます。firebugまたは同様のツールを使用して、リクエストデータを検査し、画像がフォームデータとしてシリアル化されていることを確認します（ページが読み込まれた後、[実行]をクリックします）。

POSTデータ

マークアップの例

<img id="someImage" src="../img/logo.png"/>

JavaScript

(function() {
    // access the raw image data
    var img = document.getElementById('someImage');
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    var dataUrl = canvas.toDataURL('image/png');
    var blob = dataUriToBlob(dataUrl);

    // submit as a multipart form, along with any other data
    var form = new FormData();
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/some/url', true);    // plug-in desired URL
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                alert('Success: ' + xhr.responseText);
            } else {
                alert('Error submitting image: ' + xhr.status);
            }
        }
    };
    form.append('param1', 'value1');
    form.append('param2', 'value2');
    form.append('theFile', blob);
    xhr.send(form);

    function dataUriToBlob(dataURI) {
        // serialize the base64/URLEncoded data
        var byteString;
        if (dataURI.split(',')[0].indexOf('base64') >= 0) {
            byteString = atob(dataURI.split(',')[1]);
        }
        else {
            byteString = unescape(dataURI.split(',')[1]);
        }

        // parse the mime type
        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

        // construct a Blob of the image data
        var array = [];
        for(var i = 0; i < byteString.length; i++) {
            array.push(byteString.charCodeAt(i));
        }
        return new Blob(
            [new Uint8Array(array)],
            {type: mimeString}
        );
    }
})();

参考文献

SO：'DataURIをファイルに変換し、FormDataに追加します

于 2012-09-18T04:25:53.267 に答える
0

http://en.wikipedia.org/wiki/Data_URI_scheme#HTMLのような埋め込み画像データについて話していると仮定します

****私の仮定が正しくない場合は、この回答を無視してください。**

XMLHttpRequestを使用してJSONとして送信できます。サンプルコードは次のとおりです:(送信する前にヘッダー部分（'data：image / png; base64、'）を削除することをお勧めします）

画像

<img id="myimg" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

ボタン

<input id="subbtn" type="button" value="sub" onclick="sendImg()"></input>

脚本

function sendImg() {
    var dt = document.getElementById("myimg").src;
    var xhr = new XMLHttpRequest();
    xhr.open("POST", '/Home/Index', true); //put your URL instead of '/Home/Index'
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) { //4 means request finished and response is ready
            alert(xhr.responseText);
        }
    };
    var contentType = "application/json";
    xhr.setRequestHeader("Content-Type", contentType);

    for (var header in this.headers) {
        xhr.setRequestHeader(header, headers[header]);
    }

    // here's our data variable that we talked about earlier
    var data = JSON.stringify({ src: dt });

    // finally send the request as binary data
    xhr.send(data);
}

編集

@JoeCoderが示唆しているように、jsonの代わりに、FormDataオブジェクトを使用してバイナリ形式で送信することもできます。詳細については、彼の回答を確認してください。

于 2012-09-21T20:23:11.987 に答える