Php 使用 xmlhttprequest 上传文件

Question

我对使用xmlhttprequest真的很困惑。我想向服务器发送一个文件。是否有必要使用formdata来发送文件。我正在尝试使用 xmlhttprequest 直接发送。我没有得到一个文件，而是在服务器端只得到一个文本。

var Stu_Image = localStorage.getItem('StuImage');
alert(Stu_Image);   

nImageRequest[i] = new XMLHttpRequest();
                        nImageRequest[i].open("POST", "http://10.xxx.xx.xx/server/api/upload_image.php", true);
                       // var ImageFile = new Image();
                        ImageFile = "image="+Stu_Image;

                        nImageRequest[i].setRequestHeader("Content-type", "application/x-www-form-urlencoded");

                        alert(ImageFile);
                        nImageRequest[i].onreadystatechange = function (oEvent)
                        {
                         if (nImageRequest[i].readyState == 4)
                         {
                            alert("4 status:"+ nImageRequest[i].status+"-------"+ nImageRequest[i].statusText);
                            if (nImageRequest[i].status == 200)
                            {
                                alert(nImageRequest[i].responseText);
                                return;

                            }
                            else
                            {
                              alert("Error:"+ nImageRequest[i].statusText);
                            }
                         }
                         else
                         {
                         alert("Error:"+ nImageRequest[i].readyState +"----"+nImageRequest[i].statusText);
                         }
                        };

                        nImageRequest[i].send(ImageFile);

这是我的 php 文件

header("Access-Control-Allow-Origin: *");
 $data = $_POST['image'];

//$data = $_FILES['image']['name'];

echo "".$data;
$fileData = base64_decode($data);
echo ".....".$fileData;


$uploads_dir = "server/api/uploads/";

 move_uploaded_file($fileData, $uploads_dir);

 if(!file_exists($fileData) || !is_uploaded_file($fileData)) 
{
//echo "";
echo "No upload";
}
else
{
 echo "uploaded";
}

我就是这样得到的Stu_Image

  function loadImage(Value)
   {
         var reader = new FileReader();


            reader.readAsDataURL(document.getElementById("LoadImage").files[0]);
           ImgFile = document.getElementById("LoadImage").files[0];

            /

                         //   alert(ImgFile);

               localStorage.setItem('StuImage',ImgFile);
                alert(ImgFile);


           // alert(url);

               reader.onload = function (Event)
               {


                document.getElementById("PreviewImage").src = Event.target.result;

               };

   };

Answer 1

好的，所以在浪费了几天之后，我得到了这个问题的答案。如果 he/she 被卡住 here.I 不是 post 代码，我希望答案对某人有所帮助，因为它非常大。在发送到服务器之前我没有对图像进行编码。

所以正确的方法是

1 将图像存储在 Canvas。

2 使用 canvas.toDataURL 方法对其进行编码并使用 xmlhttprequest 发送。

3 将其解码为服务器端。我使用 php 函数 base64_decode 来做到这一点。

4 使用imagecreatefromstring()方法将解码后的字符串转换为图片，然后使用imagejpeg()或imagepng()方法获取图片。

希望对大家有所帮助。如果有人需要，很高兴 post 编码。

Php 使用 xmlhttprequest 上传文件

Php file upload using xmlhttprequest

javascript

php

xmlhttprequest