gpt4 book ai didi

php - 如何使用 XMLHttpRequest 通过复制粘贴 javascript 接收 php 图像数据

转载 作者:可可西里 更新时间:2023-11-01 14:03:10 24 4
gpt4 key购买 nike

我尝试制作一个类似于 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);
}

处理 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 字节(磁盘上 8 KB) 大小。

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

最佳答案

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

不是,就是impossible .你可以粘贴的是例如来自网络的屏幕截图和图像,即what gmail does .

你最大的错误是当你已经有一个文件时使用 FileReader,$_FILES 数组在有适当的 HTTP 上传时被填充,而不是用于临时 base64 POST 参数。要进行适当的 HTTP 上传,您只需 .append() 一个文件或 blob 对象(FileBlob)。

这是一个独立的 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>

关于php - 如何使用 XMLHttpRequest 通过复制粘贴 javascript 接收 php 图像数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18055422/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com