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（）方法获取图像。

希望它有所帮助。如果有人要求，很乐意发布代码。

使用xmlhttprequest上传php文件

1 个答案: