Javascript 在浏览器中选择一个图像，调整其大小并用JS将其发送到服务器，然后让PHP将其保存在服务器上

我正在研究这个经典特性：在浏览器中选择一个文件（“浏览”），让JavaScript调整它的大小（最大宽度/高度=500像素），然后将其上传到服务器，然后让PHP将其保存到磁盘

以下是我目前拥有的（基于此其他）

$（“#文件上传”）.change（函数（事件）{
var file=event.target.files[0]；
var reader=new FileReader（）；
reader.onload=函数（readerEvent）{
var image=新图像（）；
image.onload=函数（imageEvent）{
var canvas=document.createElement（'canvas'），max_size=500，width=image.width，height=image.height；
if（宽度>高度）{if（宽度>最大尺寸）{height*=最大尺寸/宽度；width=最大尺寸；}}
else{if（height>max_size）{width*=max_size/height；height=max_size；}}
画布宽度=宽度；
canvas.height=高度；
canvas.getContext（'2d'）.drawImage（图像，0，0，宽度，高度）；
var dataUrl=canvas.toDataURL（'image/jpeg'）；
var resizedImage=dataURLToBlob（dataUrl）；
$.ajax（{type:“POST”，url:“index.php”，成功：函数（数据，状态）{}，数据：{content:resizedImage，文件名：？？}）；
}
image.src=readerEvent.target.result；
}
reader.readAsDataURL（文件）；
}
var dataURLToBlob=函数（dataURL）{
var BASE64_MARKER='；BASE64'；
if（dataURL.indexOf（BASE64_MARKER）=-1）{var parts=dataURL.split（'，'）；var contentType=parts[0]。split（'：'）[1]；var raw=parts[1]；返回新Blob（[raw]，{type:contentType}）；}
var parts=dataURL.split（BASE64_标记）；
var contentType=parts[0]。拆分（“：”）[1]；
var raw=window.atob（第[1]部分）；
var rawLength=raw.length；
var uInt8Array=新的uInt8Array（rawLength）；
对于（var i=0；i

---

您需要使用$\u文件数组来检索图像信息：

if (is_uploaded_file($_FILES['new_img']['tmp_name'])) {
    $newimg = $_FILES['new_img']['name'];
    move_uploaded_file($_FILES['new_img']['tmp_name'], "../images/{$newimg}");
}

file\u put\u contents

是一种写入文件的功能。上载文件时，它存储在临时目录中，因此您可以使用

is\u uploaded\u file

检查它是否与

$文件['new\u img']['tmp\u name']

一起上载

您可以将其原始名称与

$\u文件['new\u img']['name']

一起使用，也可以将其重命名以防止注入。然后，您必须使用

移动上传的\u文件

将图像移动到其最终位置

我差点忘了表格：

<form action="yourpage.php" method="post" enctype="multipart/form-data">
    Select image to upload:
    <input type="file" name="new_img" id="new_img">
    <input type="submit" value="Upload Image" name="submit">
</form>

选择要上载的图像：

谢谢。我还有这个

formData.append（'data'，resizedImage）；

=>

类型错误：formData.append的参数不够。

。如果我使用console.log resizedImage，我会得到

Blob{size:58596，键入：“image/jpeg”}

。为什么我不能将这个附加到formData？