Question

下面的脚本将任何图像转换为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);

我的HTML

<input id="inp" type='file'>
<p id="b64"></p>
<img id="img" height="150">

我想要实现的是将我现在显示的结果放在p标签中，其中id =＆＃34; b64在php变量$ varImage中。

.innerHTML = e.target.result;

我在网上看到我只能使用AJAX，但我不知道如果使用ajax如何？或者可以采取不同的方式吗？

Answer 1

是的，AJAX是最简单的上传方式之一，这里有一个快速的方法来展示你能做的最简单。

首先，将jQuery包含在你的html的<head>中（使用下面的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用于任何您想要的内容。

Answer 2

如果没有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] );
      }

    }

把JS结果放在php变量中

2 个答案: