6

GMail が使用するものと同様の画像アップロード機能を作成しようとしています。デスクトップから画像をコピー (CTRL-C) し、Web サイトに貼り付け (CTRL-V) ます。次に、画像は XMLHttpRequest を介して、着信ファイルを処理する php-script にアップロードされます。「処理」とは、名前を変更してサーバーに保存することを意味します。

画像 (およびデータ) を取得することはできますが、XMLHttpRequest を正常に送信および受信することができません。私のJavascriptコードは次のようになります：

  document.onpaste = function(e){
        var items = e.clipboardData.items;
        console.log(JSON.stringify(items));
        if (e.clipboardData.items[1].kind === 'file') {
            // get the blob
            var imageFile = items[1].getAsFile();
            console.log(imageFile);
            var reader = new FileReader();
            reader.onload = function(event) {
                console.log(event.target.result); // data url!
                submitFileForm(event.target.result, 'paste');
            };
        }
    };

 function submitFileForm(file, type) {
        var formData = new FormData();
        formData.append('file', file);
        formData.append('submission-type', type);

        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'php/image-upload.php');
        xhr.onload = function () {
            if (xhr.status == 200) {
                console.log('all done: ');
            } else {
                console.log('Nope');
            }
        };

        xhr.send(formData);
    }

処理 php ( php/image-upload.php) は次のようになります。

$base64string = $_POST['file'];
file_put_contents('img.png', base64_decode($base64string));

$_POST['file']空のままだと思いますが、よくわかりません。さらに、「blob サイズ」(console.log() で表示される) が実際の画像サイズよりもはるかに大きいことにも遭遇します。しかし、それは問題ではないか、エンコーディングが原因である可能性があります。

開発者コンソールにこれが表示されます。

{"0":{"type":"text/plain","kind":"string"},"1":{"type":"image/png","kind":"file"},"length":2} image-upload.js:8
Blob {type: "image/png", size: 135619, slice: function}

実際の画像ファイルを右クリックしてファイル情報を表示すると5,320 bytes (8 KB on disk)、サイズが表示されます。

必ずしも を使用する必要はありませんXMLHttpRequest。それが最初に頭に浮かんだことです。JavaScript を使用してサーバーにリアルタイムで画像をアップロードするより良い方法があれば、お知らせください。

4

4 に答える 4

3

私は完全な作業例を投稿しました。以前の問題は、ブロブを適切に構築する必要があることでした。配列表記内にファイルデータを挿入することにより

document.onpaste = function(e){
    var items = e.clipboardData.items;
    console.log(JSON.stringify(items));
    if (e.clipboardData.items[0].kind === 'file') {
            // get the blob
        var imageFile = items[0].getAsFile();
        console.log(imageFile);
        var reader = new FileReader();
        reader.onload = function(event) {
            console.log(event.target.result); // data url!
            submitFileForm(event.target.result, 'paste');
        };
        reader.readAsBinaryString(imageFile);
    }
};

function submitFileForm(file, type) {
    var formData = new FormData();
    var myBlob = new Blob([file], { "type" : "image/png"} );
    formData.append('file', myBlob, 'file.jpg');
    formData.append('submission-type', type);

    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/task/file');
    xhr.onload = function () {
        if (xhr.status == 200) {
            console.log('all done: ');
        } else {
            console.log('Nope');
        }
    };

    xhr.send(formData);
}
于 2013-08-05T10:23:18.143 に答える
-1

ファイルはファイルであるため、 $_POST ではなく $_FILE 配列にあると思います。そうでない場合は、画像を文字列に変換して、画像文字列を GET リクエストとして送信できます。

于 2013-08-05T10:19:39.680 に答える