将图像转换为 Base64 并通过 AJAX 上传

Question

如何在不使用任何外部库的情况下将图像转换为 Base64 并通过 AJAX 发送进行处理？

简单的 HTML

<input type="file" id="image" accept="image/*">

AJAX

$(document).on('click', '.btn-report', function(e){
  e.preventDefault();
  var image = $("#image").val(); // I WANT TO CONVERT THIS INTO BASE64
  $.ajax({
    type: "POST",
    url: "processes/report.php",
    data: 'image='+image,
    cache: false,
    enctype: 'multipart/form-data',
    beforeSend: function(){
      $(".message").hide();
    },
    success: function(data){
      $(".message").html(data).fadeIn();
      $("html, body").animate({ scrollTop: 0 }, "slow");
    }
  });
});

有可能吗？如果是，怎么做？

Answer 1

您需要使用 FileReader API 将文件读取为 base64 数据 URI：

$(send).on('click', () => {
    const reader = new FileReader();
    reader.addEventListener('load', (event) => {
        output.innerHTML = event.target.result;
    });
    reader.readAsDataURL(image.files[0]);
});

pre {
    white-space: pre-wrap;
    word-break: break-word;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" id="image" accept="image/*">
<button id="send">send</button>
<pre id="output"></pre>

编辑：

$(document).on('click', '.btn-report', function(e){
    e.preventDefault();
    const reader = new FileReader();
    reader.addEventListener('load', (event) => {
        var image = event.target.result;

        $.ajax({
            type: "POST",
            url: "processes/report.php",
            data: 'image='+image,
            cache: false,
            enctype: 'multipart/form-data',
            beforeSend: function(){
                $(".message").hide();
            },
            success: function(data){
                $(".message").html(data).fadeIn();
                $("html, body").animate({ scrollTop: 0 }, "slow");
            }
        });
    });
    reader.readAsDataURL($("#image")[0].files[0]);
});

Answer 2

好的，所以我破解了最佳解决方案。对于将来寻找类似答案的任何人，都可以。

在 HTML 中添加一个新的隐藏输入字段，用于在每次图像更改时存储 Base64 字符串。

<input type="file" id="image" accept="image/*" onchange="encodeImgtoBase64(this)">
<input type="hidden" id="b64"> // THIS WILL CONTAIN THE BASE64 STRING

使用 File Reader 获取 Base64 字符串，并将字符串存储在上述字段中。

function encodeImgtoBase64(element) {
  var img = element.files[0];
  var reader = new FileReader();
  reader.onloadend = function() {
    $("#b64").val(reader.result);
  }
  reader.readAsDataURL(img);
}

最后，我们将根据点击按钮执行一个简单的 AJAX 调用。

$(".btn-report").on("click", function(e){
  e.preventDefault();
  var form = $(this).closest("form");
  var image = encodeURIComponent($('#b64').val());
  $.ajax({
    type: "POST",
    url: form.attr('url'),
    data: 'image='+image,
    cache: false,
    success: function(data){
      // YOUR CODES HERE
    }
  });
});

完成！永远解决！享受：D