保存图像字节到隐藏字段HTML5

Saving image bytes into hidden field HTML5

本文关键字:字段 HTML5 隐藏 图像 字节 保存      更新时间:2023-09-26

我使用以下代码上传图像

$selectFile = $('<input type="file">').click();
      $selectFile.change(function (e) {
        var reader = new FileReader();
            reader.onload = function(event){
              var img = new Image();
              img.onload = function(){
                  $div.append('<figure class="images"><img src="'+ event.target.result +'" draggable="true" alt=""></figure>');
              }
              img.src = event.target.result;
            }
            reader.readAsDataURL(e.target.files[0]);
      });

当我看event.target.result时它包含类似于data:image/jpeg;base64,/9j/4AAQSkZJRgAB的东西

我不确定这些是图像字节吗?我对HTML 5不是很熟悉。我如何获得图像字节,以便我可以将它们存储到一些隐藏的字段

"data:image/jpeg;base64 "后面的数据是图像的base64编码版本。可以使用以下命令将其转换为字节数组:

var byteCharacters = atob(b64Data);

但我不知道为什么你想要,当Base64是很好的渲染图像无论如何:

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgAB...." >