How do I show an uploaded image in Jquery?

Question

<html>
<head><script src = "/jquery.js"></script></head>

Test Image Upload
    <input type = "file" id = "chooseimage" name = "chooseimage" accept = ".jpg, .jpeg, .png" multiple><br>
    <input type = "button" id = "submitimages" value = "Send Image">
    <br>
<div id = "test"></div>

<script>
    $("#submitimages").click(function(){
        var imageinput = $("#chooseimage")[0].files[0];
        var reader = new FileReader();
        var a = reader.readAsDataURL(imageinput);
        reader.onload = function(e)(){};  // what do i do with this?
        $("#test").html(a);
    });
</script>
</html>

For the Jquery, let me quickly run down my thought process.

1) I get the input id "chooseimage" and grab the files using .files command. I assume .files[0] means to select the first file from the HTML element (but it only selects it, not actually reading it)?

2) create a new FileReader(). I'm not quite sure what this does, I think it allows me to... read the file?

3) But to first read the file using FileReader, we need to convert the file to a base64 encoded string, so we use readAsDataURL to convert.

4) And then I do somrthing with reader.onload(), but I am not sure what this does. I was reading other tutorials on this and they all had it but no explanation what it does. I read the Mozilla Documentation but didn.t quite understand it. I've done nothing with it so far.

5) I want to show the base64 string in the div element with id "test". I think the browser will automatically interpret the string into an image. Either way, it's not showing anything.

Can someone walk me through what I do or do not understand correctly and what I'm doing wrong?

https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded — vadivel a, Feb 17 '20 at 05:02

score 0 · Answer 1 · edited Feb 17 '20 at 06:20

0

Check this out, and let me know how it goes. :)

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    
    reader.onload = function(e) {
      $('#imageShow').attr('src', e.target.result);
    }
    
    reader.readAsDataURL(input.files[0]);
  }
}

$("#imgPreview").change(function() {
  readURL(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form runat="server">
  <input type='file' id="imgPreview" />
  <img id="imageShow" src="#" alt="your image" />
</form>

edited Feb 17 '20 at 06:20

Serving Quarantine period

66,345
10
43
85

answered Feb 17 '20 at 05:06

Jatin

1

It works, but I don't know what your code is doing. Can you explain it using my code? – yosimba2000 Feb 17 '20 at 05:14
Instead of copying code from closed thread line by line, you have to provide duplicate thread link only. If you have any other approach to do the same then you can post answer. – Serving Quarantine period Feb 17 '20 at 05:15
@AnantSingh---AlivetoDie Same approach may be used in any other question. – Jatin Feb 18 '20 at 06:09
@yosimba2000 FileReader is a web API and we have provided with some of the inbuilt functions like https://developer.mozilla.org/en-US/docs/Web/API/FileReader. One of them is readAsDataURL which basically converts the Blob or file whichever you have selected into a "data:*/*;base64" and you are aware image tag can show base64 code if we pass it into src. Means if whether u use URL or Base64 code as src of an image it will give you a preview. – Jatin Feb 18 '20 at 06:17
@Jatin as a stack-overflow user it's my responsibility that first i check that already same kind of question asked before, if yes check it and if you know that answers of that thread will work for current question as well (with minimal changes) then just provide link and mark question as duplicate. If you have totally/majorly different approach then you can post answer. – Serving Quarantine period Feb 18 '20 at 06:20

How do I show an uploaded image in Jquery?

1 Answers1