使用xmlhttprequest上傳php文件

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

好的，浪費幾天后，我得到了這個問題的答案。 如果有人卡在這里，希望這個答案對他/她有所幫助。我不會發布代碼，因為它很大。 發送到服務器之前，我沒有對圖像進行編碼。

所以正確的方法是

1將圖像存儲在畫布上。

2使用canvas.toDataURL方法對其進行編碼，並使用xmlhttprequest發送。

3解碼為服務器端。 我用php函數base64_decode來做到這一點。

4使用imagecreatefromstring（）方法將解碼后的字符串轉換為圖像，然后使用imagejpeg（）或imagepng（）方法獲取圖像。

希望它可以幫助某人。 如果有人要求，很高興發布代碼。