下面的脚本将任何图像转换为 base 64，我正在尝试将转换后的字符串放在 php 变量中，然后再将其插入我的数据库。
我的 JS
function uploadFile() {
if (this.files && this.files[0]) {
var FR= new FileReader();
FR.addEventListener("load", function(e) {
document.getElementById("img").src = e.target.result;
document.getElementById("b64").innerHTML = e.target.result;
});
FR.readAsDataURL( this.files[0] );
}
}
document.getElementById("inp").addEventListener("change", readFile);
我的网页
<input id="inp" type='file'>
<p id="b64"></p>
<img id="img" height="150">
我试图实现的是将我现在显示的结果放在 p 标签中，id="b64 放在 php 变量$varImage中。
.innerHTML = e.target.result;
我在网上读到我只能用 AJAX 完成，但我不确定如果是这种情况如何使用 ajax？或者可以以不同的方式完成？
如果没有 Ajax，您可以将生成的值放入隐藏的输入值中并简单地发送表单，因此 PHP 脚本处理表单将在 $_POST['b64'] 变量中获取它。
.HTML
<input id="inp" type='file'>
<input type="hidden" id="b64" value="">
<img id="img" height="150">
.JS
function readFile() {
if (this.files && this.files[0]) {
var FR= new FileReader();
FR.addEventListener("load", function(e) {
document.getElementById("img").src = e.target.result;
document.getElementById("b64").value = e.target.result;
});
FR.readAsDataURL( this.files[0] );
}
}
是的，AJAX 是最简单的上传方法之一，这里有一个快速的操作方法，展示了您可以做的最简单的方法。
首先，通过将jQuery放在html的<head>中包含jQuery(使用下面的cdn或本地下载(
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
现在，回到你的(javascript(代码。假设 base64 字符串位于变量result中。我们可以向 PHP 服务器发送一个POST请求(在此示例中发送到文件upload.php(，结果在请求正文中。
$.ajax({
method: "POST",
url: "upload.php",
data: { img: result }
});
现在，在upload.php中，这就是您所需要的：
<?php
if (isset($_POST['img'])) {
$varImage = $_POST['img'];
} else {
print 'No image sent!';
}
?>
现在，您可以将$varImage用于任何您想要的事情。
由于 js 脚本在客户端计算机上执行，而 php 在服务器(主机(计算机上执行。你必须将数据从你的js发送到你的php。 当然，您可以使用jquery，但不是唯一的解决方案。如果你不适应jquery，你更喜欢原生js，还有另一种解决方案。
有一个 ajax 请求的示例：
$.post("mysite/create",
{ "data": JSON.stringify({'id': id})},
function (data, status) {
console.log("Data: " + data + "nStatus: " + status);
});
});
还有一个本机js XmlHttpRequest的例子：
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "mysite/create", true);
xhttp.send();
}
最后一个解决方案是使用表单：
<form method="post" action="mysite/create">
<input name="data">
</form>
无论哪种方式，您都需要完成该步骤才能将数据保存到数据库中。
如果不ajax，就无法将变量从 .js 发送到 .php 。
.js
$.ajax({
url: "",
data: {
name: "value"
}
})
.php
$data = htmlspecialchars($_GET["name"]); // return "value";