How to make image upload using jQuery or Javascript

Question

I couldn't do this because my javascript part was not good. I have a design in mind. When you click the button and upload the picture, the picture will appear in that circle. At the same time if you want to remove the cross button. Theme screenshot

<div class="upload">
<img src="images/upload.png" class="uploadImage" alt="">
<input type="file" class="imageUpload">

<style>
.upload{
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 3px dashed #ddd;
}
input[type="file"].imageUpload{
    cursor: pointer;
    font: 300 14px sans-serif;
    color:#9e9e9e;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background:  rgba(0, 0, 0, 0);
    position: relative;
    z-index: 2;
    display: block;
    margin-top: -2px;
}
input[type="file"].imageUpload::-webkit-file-upload-button{
    display: none
}
img.uploadImage{
    position: absolute;
    margin-top: 41px;
    z-index: 1;
    left: 70px;
    width: 39px;
}
</style>

There is a design for the album page. I'm gonna use a design here. Click on the button and the image after the bear will be listed next to the size button. At the same time the cross button can be removed at any time. Theme screenshot

I would appreciate it if you tell me with a simple design. It's like I can handle it myself if I understand your logic.

Answer 1

Somewhat like you want

<form>
  <input required type="file" name="fileToUpload" multiple data-preview-to="#preview" />
  <div id=preview></div>
  <input type=hidden name="who-sent" value="jake sent me">
  <button>submit</button>
</form>

$($(this).data("preview-to")).html($.map(this.files, function(f) {
    return `<figure>
   <img src="${URL.createObjectURL(f)}">
   <figcaption><input type=checkbox checked> ${f.name}</figcaption>
  </figure>`
  }))

JSFiddle Example