如何使用XMLHttpRequest通过copy-n-paste javascript接收php图像数据

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

我已经可以获取图像（和-数据），但无法成功提交和接收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);
    }

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

处理php（

php/image upload.php

）的方式如下所示：

  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);
    }

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

我认为

$\u 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}

如果我通过右键单击实际图像文件查看文件信息，它会显示大小为

5320字节（磁盘上为8KB）

---

我不一定需要使用

XMLHttpRequest

，这正是我首先想到的。如果有更好的方法通过javascript实现实时图像上传到服务器，请告诉我们。

图像文件大小是否可能大于“上传最大文件大小”设置？（通常默认为2兆）

我猜该文件在$文件数组中，而不是$POST中，因为它是一个文件。

---

如果没有，您可以将图像转换为字符串，然后将imagestring作为GET请求发送。

我已经发布了一个完整的工作示例。以前的问题是需要正确地构造blob。通过将文件数据注入数组表示法中

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);
}

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

不，就是这样。您可以粘贴的内容是，例如，来自web的屏幕截图和图像

您最大的错误是在已经有文件时使用FileReader，

$\u FILES

数组是在有正确的HTTP上载而不是临时base64 POST参数时填充的。要执行正确的HTTP上载，只需

.append（）

一个文件或blob对象（

file

s是

blob

s）

这是一个独立的PHP文件，应该只工作，托管文件，打开它是一个页面，截图，然后粘贴在页面上，几秒钟后图像应该出现在页面上

<?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>

document.onpaste=函数（e）{
var items=e.clipboardData.items；
var文件=[]；
对于（变量i=0，len=items.length；i

开发者控制台的“网络”选项卡显示了什么内容。是通过网络实际提交的文件还是发送的是空表单。your

reader.onload=function（event）{console.log（event.target.result）；//数据url！submitFileForm（event.target.result，'paste'）；}功能未启动。我对此表示怀疑，磁盘上的映像大小是5320字节（磁盘上为8 KB），对，我现在正确发送了数据。然而，每次都会创建一个零字节的文件。我也尝试过使用$\u文件，但我不确定这是否正确。有什么想法吗？听起来不错，但对我来说没用。文件大小保持为0字节。请注意，Blob将数组作为其第一个参数。此外，通过这种方式，我的所有$u POST变量（例如“提交类型”）都被清除，这意味着它们没有在php脚本中定义。你自己试过吗？如果你能在这方面帮助我，我将非常感激！DevZer0赏金开始了！你能发布php部分吗？：）
pathinfo（$_FILES['file']['name']）['extension']
为空：（.如果你能告诉我如何获得图像扩展，它是你的。：）很好，我只是用ajax代码替换XMLRequest，这不重要，只取决于你使用的是什么。