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

Question

I am using following code to upload the image

$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]);

      });

When I look at the event.target.result it contains something like data:image/jpeg;base64,/9j/4AAQSkZJRgAB

I am not sure if these are the image bytes? I am not very much familiar with HTML 5. How do I get the image bytes so that i can store them into some hidden field.

Answer 1

The data after the "data:image/jpeg;base64," is a Base64 encoded version of the image. You can convert it to a byte array using:

var byteCharacters = atob(b64Data);

But I'm not sure why you'd want to, when the Base64 is fine for rendering an image anyway with :

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