Javascript PHPs base 64_decode未将base 64字符串转换为实际可行的图像文件

大家好，我成功地找到了一个方法，声称可以将文件输入文件转换成JavaScript中的base 64字符串，所以我成功地发送了base 64

JSON通过AJAX和base64编码的字符串类似于JSON方法“photo”中发送的字符串：“data:image/jpeg；base64，/9j/4AAQSkZJRgABAQEASABIAAD/2wB等…”

因此，当base 64字符串到达PHP文件时。PHP很神奇，它成功地将一个文件存储在我希望该文件所在的目标文件夹中，因此当我查看该文件夹时，会发现一个文件，但是

当我试图打开照片文件查看时，照片查看器应用程序会显示类似image.jpg的内容，看起来我们不支持此文件格式，而在其他照片查看器应用程序中，它会显示一些内容

与此类似，我做错了什么

这是我的密码

index.php

<style>

#photo-input{
display: block;
margin-bottom: 50px;
}

</style>

<script>

document.addEventListener('DOMContentLoaded',function(){

document.querySelector('#submit').addEventListener('click',function(){

var photo_input= document.querySelector('#photo-input').files[0];

//Convert #photo-input content into a base 64 string
var reader = new FileReader();
reader.readAsDataURL(photo_input);

reader.onload = function (){
var photo_input_result= reader.result;
sendUploadInfo(photo_input_result);
}
//

});

function sendUploadInfo(photo_input_result){

var photo= photo_input_result;

//<JSON data>

var upload_info = {
    first_name: "John",
    last_name: "Smith",
    photo: photo
};

//</JSON data>

var upload_info_json_object= 'upload_info_json_object='+JSON.stringify(upload_info); 

//<AJAX>
var xhr= new XMLHttpRequest();
xhr.onreadystatechange= function(){

if(xhr.readyState == 4){

document.querySelector('#output').innerHTML= xhr.responseText;

}
}

xhr.open('POST','x');
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(upload_info_json_object);
//</AJAX>
}

});

</script>

<input type='file' id='photo-input'>

<button id='submit'>Send JSON data</button>

<div id='output'></div>

<?php

$upload_info_json_object = json_decode($_POST['upload_info_json_object']);

$first_name= $upload_info_json_object->first_name;
$last_name= $upload_info_json_object->last_name;


//Photo upload section

$photo= $upload_info_json_object->photo;

base64_decode($photo); 

$path= $_SERVER['DOCUMENT_ROOT'].'/send-json-data-by-ajax/object-based/with-file/2/images/image.jpg';

file_put_contents($path, $photo);

//

?>

<h1><?php echo $first_name.' '.$last_name.' just uploaded a photo.'; ?></h1>

<style>

#photo-input{
display: block;
margin-bottom: 50px;
}

</style>

<script>

document.addEventListener('DOMContentLoaded',function(){

document.querySelector('#submit').addEventListener('click',function(){

var photo_input= document.querySelector('#photo-input').files[0];

//Convert #photo-input content into a base 64 string
var reader = new FileReader();
reader.readAsDataURL(photo_input);

reader.onload = function (){
var photo_input_result= reader.result;
sendUploadInfo(photo_input_result);
}
//

});

function sendUploadInfo(photo_input_result){

//Remove the data:image/file_extension;base64, prefix by not removing this you wont be able to view this as a file in any computing application
var remove_the_photo_file_reader_prefix= photo_input_result.split(',')[1];
//

//Escape incompatible characters that won't work properly in JSON and PHP
var escape_incompatible_characters_from_the_photo= encodeURIComponent(remove_the_photo_file_reader_prefix);
//

var photo= escape_incompatible_characters_from_the_photo;

//<JSON data>

var upload_info = {
    first_name: "John",
    last_name: "Smith",
    photo: photo
};

//</JSON data>

var upload_info_json_object= 'upload_info_json_object='+JSON.stringify(upload_info); 

//<AJAX>
var xhr= new XMLHttpRequest();
xhr.onreadystatechange= function(){

if(xhr.readyState == 4){

document.querySelector('#output').innerHTML= xhr.responseText;

}
}

xhr.open('POST','x');
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(upload_info_json_object);
//</AJAX>
}

});

</script>

<input type='file' id='photo-input'>

<button id='submit'>Send JSON data</button>

<div id='output'></div>

<?php

$upload_info_json_object = json_decode($_POST['upload_info_json_object']);

$first_name= $upload_info_json_object->first_name;
$last_name= $upload_info_json_object->last_name;


//Photo upload section
$photo= $upload_info_json_object->photo;

//Decode into a file 
$photo= base64_decode($photo); 

file_put_contents('geeksforgeeks-22.jpg',$photo);

//

?>

<h1><?php echo $first_name.' '.$last_name.' just uploaded a photo.'; ?></h1>

#照片输入{
显示：块；
边缘底部：50px；
}
document.addEventListener（'DOMContentLoaded'，function（）{
document.querySelector（“#submit”）.addEventListener（'click'，function（）{
var photo#u input=document.querySelector（“#photo input”）.files[0]；
//将#照片输入内容转换为64进制字符串
var reader=new FileReader（）；
reader.readAsDataURL（照片输入）；
reader.onload=函数（）{
var photo_input_result=reader.result；
sendUploadInfo（照片输入结果）；
}
//
});
函数sendUploadInfo（照片输入结果）{
var photo=照片输入结果；
//
变量上传信息={
名字：“约翰”，
姓：“史密斯”，
照片：照片
};
//
var upload_info_json_object='upload_info_json_object='+json.stringify（upload_info）；
//
var xhr=new XMLHttpRequest（）；
xhr.onreadystatechange=函数（）{
if（xhr.readyState==4）{
document.querySelector（“#output”）.innerHTML=xhr.responseText；
}
}
xhr.open（'POST'，'x'）；
setRequestHeader（“内容类型”，“应用程序/x-www-form-urlencoded”）；
send（上传\u信息\u json\u对象）；
//
}
});
发送JSON数据

x.php

<style>

#photo-input{
display: block;
margin-bottom: 50px;
}

</style>

<script>

document.addEventListener('DOMContentLoaded',function(){

document.querySelector('#submit').addEventListener('click',function(){

var photo_input= document.querySelector('#photo-input').files[0];

//Convert #photo-input content into a base 64 string
var reader = new FileReader();
reader.readAsDataURL(photo_input);

reader.onload = function (){
var photo_input_result= reader.result;
sendUploadInfo(photo_input_result);
}
//

});

function sendUploadInfo(photo_input_result){

var photo= photo_input_result;

//<JSON data>

var upload_info = {
    first_name: "John",
    last_name: "Smith",
    photo: photo
};

//</JSON data>

var upload_info_json_object= 'upload_info_json_object='+JSON.stringify(upload_info); 

//<AJAX>
var xhr= new XMLHttpRequest();
xhr.onreadystatechange= function(){

if(xhr.readyState == 4){

document.querySelector('#output').innerHTML= xhr.responseText;

}
}

xhr.open('POST','x');
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(upload_info_json_object);
//</AJAX>
}

});

</script>

<input type='file' id='photo-input'>

<button id='submit'>Send JSON data</button>

<div id='output'></div>

<?php

$upload_info_json_object = json_decode($_POST['upload_info_json_object']);

$first_name= $upload_info_json_object->first_name;
$last_name= $upload_info_json_object->last_name;


//Photo upload section

$photo= $upload_info_json_object->photo;

base64_decode($photo); 

$path= $_SERVER['DOCUMENT_ROOT'].'/send-json-data-by-ajax/object-based/with-file/2/images/image.jpg';

file_put_contents($path, $photo);

//

?>

<h1><?php echo $first_name.' '.$last_name.' just uploaded a photo.'; ?></h1>

<style>

#photo-input{
display: block;
margin-bottom: 50px;
}

</style>

<script>

document.addEventListener('DOMContentLoaded',function(){

document.querySelector('#submit').addEventListener('click',function(){

var photo_input= document.querySelector('#photo-input').files[0];

//Convert #photo-input content into a base 64 string
var reader = new FileReader();
reader.readAsDataURL(photo_input);

reader.onload = function (){
var photo_input_result= reader.result;
sendUploadInfo(photo_input_result);
}
//

});

function sendUploadInfo(photo_input_result){

//Remove the data:image/file_extension;base64, prefix by not removing this you wont be able to view this as a file in any computing application
var remove_the_photo_file_reader_prefix= photo_input_result.split(',')[1];
//

//Escape incompatible characters that won't work properly in JSON and PHP
var escape_incompatible_characters_from_the_photo= encodeURIComponent(remove_the_photo_file_reader_prefix);
//

var photo= escape_incompatible_characters_from_the_photo;

//<JSON data>

var upload_info = {
    first_name: "John",
    last_name: "Smith",
    photo: photo
};

//</JSON data>

var upload_info_json_object= 'upload_info_json_object='+JSON.stringify(upload_info); 

//<AJAX>
var xhr= new XMLHttpRequest();
xhr.onreadystatechange= function(){

if(xhr.readyState == 4){

document.querySelector('#output').innerHTML= xhr.responseText;

}
}

xhr.open('POST','x');
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(upload_info_json_object);
//</AJAX>
}

});

</script>

<input type='file' id='photo-input'>

<button id='submit'>Send JSON data</button>

<div id='output'></div>

<?php

$upload_info_json_object = json_decode($_POST['upload_info_json_object']);

$first_name= $upload_info_json_object->first_name;
$last_name= $upload_info_json_object->last_name;


//Photo upload section
$photo= $upload_info_json_object->photo;

//Decode into a file 
$photo= base64_decode($photo); 

file_put_contents('geeksforgeeks-22.jpg',$photo);

//

?>

<h1><?php echo $first_name.' '.$last_name.' just uploaded a photo.'; ?></h1>

---

我认为您应该完全放弃当前的方法，并用以下方法取而代之：

<form action="x.php" method="post" enctype="multipart/form-data">
  <input type="hidden" name="first_name" value="John" />
  <input type="hidden" name="last_name" value="Smith" />
  <input type="file" name="photo" accept="image/*" />
  <input type="submit" value="Upload Photo" />
</form>

然后，在服务器端代码上检查结果，如下所示：

<?php
  print_r($_POST); // All of your post fields
  print_r($_FILES); // All of the file uploads

---

我认为您应该完全放弃当前的方法，并用以下方法取而代之：

<form action="x.php" method="post" enctype="multipart/form-data">
  <input type="hidden" name="first_name" value="John" />
  <input type="hidden" name="last_name" value="Smith" />
  <input type="file" name="photo" accept="image/*" />
  <input type="submit" value="Upload Photo" />
</form>



然后，在服务器端代码上检查结果，如下所示：

<?php
  print_r($_POST); // All of your post fields
  print_r($_FILES); // All of the file uploads

Brad指出了一种更有效的方法，但根据您的代码，我发现您保留的字符串不是base64_解码的结果

改变

//Photo upload section

$photo=$upload_info_json_object->photo;

base64_decode($photo);

为了

Brad指出了一种更有效的方法，但根据您的代码，我发现您保留的字符串不是base64_解码的结果

改变

//Photo upload section

$photo=$upload_info_json_object->photo;

base64_decode($photo);

为了

我看到了几个主要问题：

在x.php的第13行，您调用
base64\u decode
，但不分配结果。If应读为
$photo=base64\u解码（$photo）

写入的文件中不应包含用于在浏览器中显示图像的前缀（
data:image/jpeg；base64，
）。因此，您的最终解码应该如下所示：

其中是在第一个逗号上拆分，返回一个数组，我们只访问包含字符串其余部分的第二个项，因为我们将它限制为2个项，这意味着以后如果有逗号，它是安全的。（使用
substr
和
strpos
可能会更有效率，因此这也是一个不错的选择）

如果文件类型不总是JPEG，那么您还需要解析第一部分，以便知道在文件名中使用什么（至少如果您关心可移植性的话）


如果这不能解决您的问题，那么开始逐步排除故障：从JavaScript获取值，并在解码之前将其与PHP中的值进行比较。它们相同吗？通常，您可以根据配置获得一些额外的编码（例如URL编码），因此排除这一点很重要

如果字符串看起来相同，我将转到
base64_decode
函数，并将可选的
$strict
参数设置为
true
。如果存在任何非base64字符，这将导致返回false（而不是自动删除它们）

您也可以尝试使用一个小的已知字符串进行测试（绕过编码以确保这不是问题），例如1x1像素的黑色GIF：

R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=

您可以直接在PHP中对其进行测试，以消除JSON对象的任何编码或解码或处理过程中的问题。
我发现了几个主要问题：

在x.php的第13行，您调用
base64\u decode
，但不分配结果。If应读为
$photo=base64\u解码（$photo）

写入的文件中不应包含用于在浏览器中显示图像的前缀（
data:image/jpeg；base64，
）。因此，您的最终解码应该如下所示：

其中是在第一个逗号上拆分，返回一个数组，我们只访问包含字符串其余部分的第二个项，因为我们将它限制为2个项，这意味着以后如果有逗号，它是安全的。（使用
substr
和
strpos
可能会更有效率，因此这也是一个不错的选择）

如果文件类型不总是JPEG，那么您还需要解析第一部分，以便知道在文件名中使用什么（至少如果您关心可移植性的话）


如果这不能解决您的问题，那么开始逐步排除故障：从JavaScript获取值，并在解码之前将其与PHP中的值进行比较。它们相同吗？通常，您可以根据配置获得一些额外的编码（例如URL编码），因此排除这一点很重要

如果字符串看起来相同，我将转到
base64\u decode
函数并设置可选的
$strict
参数