如何使用XMLHttpRequest通过copy-n-paste javascript接收php图像数据 [英] How to receive php image data over copy-n-paste javascript with XMLHttpRequest

问题描述

我尝试制作类似于GMail使用的图像上传功能。您从桌面复制（CTRL-C）图像并将其粘贴（CTRL-V）到网站上。
然后将图像通过XMLHttpRequest上传到处理传入文件的php脚本，处理意味着重命名并存储在服务器上。

I try to make an image-upload functionality similar to the one GMail uses. You copy (CTRL-C) an image from your desktop and paste (CTRL-V) it onto the website. The image is then uploaded via a XMLHttpRequest to a php-script that handles the incoming file, whereby "handling" means renaming and storing on the server.

我已经可以获取图像（和-data），但我无法成功提交和接收XMLHttpRequest。
我的Javascript代码如下：

I can already fetch the image (and -data), but I am unable to successfully submit and receive the XMLHttpRequest. My Javascript code looks like that:

  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 ）看起来像这样：

The handling php (php/image-upload.php) looks like that:

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

我认为 $ _ POST ['file'] 保持空白，但我不确定。
而且，我还遇到blob size（用console.log（）显示）比实际图像大小大。但也许这无关紧要或由编码造成。

I think the $_POST['file'] stays empty, but I am not sure. What's more, I also encounter the "blob size" (displayed with console.log()) is way larger than the actual image size. But maybe that's no matter or caused by encodings.

开发者控制台会显示此信息。

The developer console displays this.

{"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字节（磁盘上为8 KB） 大小。

If I view the file-info by right-clicking the actual image file, it shows 5,320 bytes (8 KB on disk) in size.

我不一定需要使用 XMLHttpRequest ，它是我首先想到的是什么。如果有更好的方法使用javascript实现实时图像上传到服务器，请告诉我们。

I do not necessarily need to use a XMLHttpRequest, it was just what came to my mind first. If there's a better way of achieving realtime image-uploading to a server with javascript, please let us know.

推荐答案

您从桌面复制（CTRL-C）图像并将其粘贴（CTRL-V）到网站上。

you copy (CTRL-C) an image from your desktop and paste (CTRL-V) it onto the website.

不，那是不可能 。您可以粘贴的内容是来自网络的截图和图片，即 gmail所做的事情。

No, that is impossible. What you can paste is e.g. screenshots and images from the web, that's what gmail does.

当你已经拥有一个文件时，你最大的错误是使用FileReader， $ _ FILES 数组当正确的HTTP上传不是ad hoc base64 POST参数时填充。要进行正确的HTTP上传，只需 .append（）文件或blob对象（文件 s Blob s）。

Your biggest mistake is using FileReader when you already have a file, the $_FILES array is filled when there is a proper HTTP upload not for ad hoc base64 POST param. To do a proper HTTP upload, you just .append() a file or blob object (Files are Blobs).

这是一个独立的PHP文件，应该可以正常工作，托管文件，打开它是一个页面，截取屏幕截图，然后在页面上粘贴它，几秒钟后图像就会显示在页面上。

This is a stand-alone PHP file that should just work, host the file, open it is a page, take a screenshot, then paste it while on the page and after a few seconds the image should appear on the page.

<?php
if( isset( $_FILES['file'] ) ) {
    $file_contents = file_get_contents( $_FILES['file']['tmp_name'] );
    header("Content-Type: " . $_FILES['file']['type'] );
    die($file_contents);
}
else {
    header("HTTP/1.1 400 Bad Request");
}
print_r($_FILES);
?>

<script>
document.onpaste = function (e) {
    var items = e.clipboardData.items;
    var files = [];
    for( var i = 0, len = items.length; i < len; ++i ) {
        var item = items[i];
        if( item.kind === "file" ) {
            submitFileForm(item.getAsFile(), "paste");
        }
    }

};

function submitFileForm(file, type) {
    var extension = file.type.match(/\/([a-z0-9]+)/i)[1].toLowerCase();
    var formData = new FormData();
    formData.append('file', file, "image_file");
    formData.append('extension', extension );
    formData.append("mimetype", file.type );
    formData.append('submission-type', type);

    var xhr = new XMLHttpRequest();
    xhr.responseType = "blob";
    xhr.open('POST', '<?php echo basename(__FILE__); ?>');
    xhr.onload = function () {
        if (xhr.status == 200) {
            var img = new Image();
            img.src = (window.URL || window.webkitURL)
                .createObjectURL( xhr.response );
            document.body.appendChild(img);
        }
    };

    xhr.send(formData);
}
</script>

这篇关于如何使用XMLHttpRequest通过copy-n-paste javascript接收php图像数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！