如何使用jQuery或Javascript上传图片

Question

我无法执行此操作，因为我的javascript部分不好。 我有一个设计思路。 当您单击按钮并上传图片时，图片将出现在该圆圈中。 同时如果要删除十字按钮。 主题截图

<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>

相册页面有一个设计。 我要在这里使用设计。 单击按钮，熊之后的图像将显示在尺寸按钮旁边。 同时，可以随时删除十字按钮。 主题截图

如果您以简单的设计告诉我，我将不胜感激。 如果我了解您的逻辑，就好像我可以自己处理。

Answer 1

有点像你想要的

<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示例