javascript - 如何检索 img 的 base64 内容

Question

我正在尝试制作一个提交标题、简短描述、base64 格式 图像和帖子的完整描述的表单。我的问题是图像，我不知道如何在 jQuery 3.1.1 中转换图像这是我的代码:

$(".submit-btn").click(function () {
    var titre = $(".title").val();
    var description = $(".description").val();
    var img = $(".img").val();
    var full = $(".full").val();
    var posting = $.post("http://localhost:8888/api/addPost.php", {
      title: titre,
      desc: description,
      image: img,
      fullDesc: full
    });
  });

@import url("http://code.ionicframework.com/1.3.2/css/ionic.css");
input[type='file'] {
  color: transparent;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="list">
	  <label class="item item-input">
	    <input type="text" placeholder="Title" class="title">
	  </label>
	  <label class="item item-input">
	    <input class="description" type="text" placeholder="Simple Description (max 60 caracters)" maxlength="60">
	  </label>
	  <label class="item item-input">
	    <div>
	    	<span id='button_upload'>Image : </span>
		    <input type='file' class="img">
		</div>
	  </label>
	  <label class="item item-input">
	    <textarea placeholder="Full description" class="full"></textarea>
	  </label>
	  	<div class="padding">
		  <button class="button button-block button-positive submit-btn">
	       Submit
	    </button>
    	</div>
	</div>

Answer 1

请考虑使用 FileReader.readAsDataURL() https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

$(".submit-btn").click(function () {
var reader = new FileReader();
var titre = $(".title").val();
var description = $(".description").val();
var img = $(".img").files[0]?reader.readAsDataURL($(".img").files[0]):'No image';
var full = $(".full").val();
var posting = $.post("http://localhost:8888/api/addPost.php", {
  title: titre,
  desc: description,
  image: img,
  fullDesc: full
});
});