Javascript 使用JS将渲染图像添加到array onclick以提交

我目前有一个功能，用户可以上传和显示多个图像一次作为预览上的一个模式。理想情况下，我希望允许用户单击其中一个显示的图像，并在单击事件中将其添加到一个数组中，这样他们就可以点击一个按钮将图像提交到某处进行处理。我已经试了几个小时试图把它编码出来，但是遇到了麻烦，我不介意在这个问题上提供一些指导！我希望能够实现只有HTML，CSS和香草JS。。。任何建议或提供的帮助将不胜感激！我在网上搜索了一段时间，但无法真正掌握提供的许多概念

<!--Modal code: -->
<div id="simpleModal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <span class="closeBtn">&times;</span>
      <h2>Image search and processing: </h2>
    </div>
    <div class="modal-body"> 
      <form id="modal-form" class="form">
        <label for="files">Select multiple files: </label>
        <input id="files" target="_blank" type="file" onchange="previewFiles()" multiple/>
        <output id="result">
        <button type="submit" class="floating-btn" value ="submit">+</button>
        <button type="reset" class="floating-btn2" value ="reset" onclick="return hideImage()">x</button>
        
      </form>
    </div>
    <div id="preview"></div>
</div>
</div>

<script>

  //code to render image files to modal
  function previewFiles() {

  var preview = document.querySelector('#preview');
  var files   = document.querySelector('input[type=file]').files;

  function readAndPreview(file) {

  // Make sure `file.name` matches our extensions criteria
    if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
      var reader = new FileReader();

      reader.addEventListener("load", function () {
        var image = new Image();

        //styling in JS //
        image.height = 160;
        image.width = 160;
        image.style.flexDirection = "row"; 

        image.title = file.name;
        image.src = this.result;
        
        preview.appendChild( image );

        }, false);
        

      reader.readAsDataURL(file);
    }

  }

  if (files) {
    [].forEach.call(files, readAndPreview);
  }

}
    //delete form 
function hideImage() {
    document.getElementById("modal-form").reset(); //reset form
    var preview = document.querySelector("#preview");
    preview.innerHTML = '' //set preview to null
    </script>

}


/* floating buttons: */
.floating-btn{
    width: 80px;
    height: 80px;
    background: #0B406D;
    display: flex;
    border-radius: 50%;
    color: white;
    font-size: 40px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.25);
    position: fixed;
    right: 120px;
    bottom: 20px;
    outline: blue;
    border: none;
    cursor: pointer;
}
.floating-btn:hover {
    background: #4D89C8;
}

.floating-btn2{
    width: 80px;
    height: 80px;
    background: #0B406D;
    display: flex;
    border-radius: 50%;
    color: white;
    font-size: 40px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.25);
    position: fixed;
    right: 20px;
    bottom: 20px;
    outline: blue;
    border: none;
    cursor: pointer;

}
.floating-btn2:hover {
    background: #4D89C8;
}

/*Modal styling: */

.modal{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    z-index: 1;
    display: none;
    justify-content: center;
    align-items: center;
}
.modal-content{
    width: 80%;
    height: 80%;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    padding: 15px;
    margin: 20% auto;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px rgba(0, 0, 0, 0.17);
    animation-name: modalopen;
    animation-duration: 1s;
    flex-direction: column;
    justify-content: space-around;
}
.modal-header{
    font-size:12pt;
    color: black;
}
.modal-header h2{
    margin: 0;
}
    
.modal-body{
    width: 33.33%;
    padding: 5px;
}
.closeBtn{
    color: #ccc;
    float: right;
    font-size: 50px;
}
.closeBtn:hover,.closeBtn:focus{
    color: red;
    text-decoration: none;
    cursor: pointer;
}
@keyframes modalopen{
    from{opacity: 0}
    to {opacity: 1}
}


/*Image displaying style: */
form{
    margin-top:10px;
    padding: 5px;
    border-radius: 4px;
    margin: 0 auto;

}
a img{
    float: left;
    width: 150px;
    height: 150px;
    padding-right: 15px;
    box-sizing: border-box;
}
img:hover {
    transform: scale(1.5); 
    cursor: pointer;
}

&时代；
图像搜索和处理：
选择多个文件：
+
x
//将图像文件渲染到模式的代码
函数previewFiles（）{
var preview=document.querySelector（“#preview”）；
var files=document.querySelector（'input[type=file]'）。files；
函数readAndPreview（文件）{
//确保'file.name'符合我们的扩展标准
if（/\（jpe？g | png | gif）$/i.test（file.name））{
var reader=new FileReader（）；
reader.addEventListener（“加载”，函数（）{
var image=新图像（）；
//JS中的样式//
image.height=160；
image.width=160；
image.style.flexDirection=“行”；
image.title=file.name；
image.src=this.result；
预览。追加子对象（图像）；
}，假）；
reader.readAsDataURL（文件）；
}
}
如果（文件）{
[].forEach.call（文件、读取和预览）；
}
}
//删除表格
函数hideImage（）{
document.getElementById（“模态表单”）.reset（）；//reset表单
var preview=document.querySelector（“预览”）；
preview.innerHTML=''//将preview设置为null
}
/*浮动按钮：*/
.浮动btn{
宽度：80px；
高度：80px；
背景：#0B406D；
显示器：flex；
边界半径：50%；
颜色：白色；
字体大小：40px；
对齐项目：居中；
证明内容：中心；
文字装饰：无；
盒影：2px2p5pRGBA（0,0,0,0.25）；
位置：固定；
右：120px；
底部：20px；
轮廓：蓝色；
边界：无；
光标：指针；
}
.浮动btn：悬停{
背景：4D89C8；
}
.浮动-btn2{
宽度：80px；
高度：80px；
背景：#0B406D；
显示器：flex；
边界半径：50%；
颜色：白色；
字体大小：40px；
对齐项目：居中；
证明内容：中心；
文字装饰：无；
盒影：2px2p5pRGBA（0,0,0,0.25）；
位置：固定；
右：20px；
底部：20px；
轮廓：蓝色；
边界：无；
光标：指针；
}
.浮动-btn2：悬停{
背景：4D89C8；
}
/*模态样式：*/
.莫代尔{
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,0.7）；
位置：固定；
排名：0；
z指数：1；
显示：无；
证明内容：中心；
对齐项目：居中；
}
.模态内容{
宽度：80%；
身高：80%；
背景色：rgba（255、255、255、0.9）；
边界半径：4px；
填充：15px；
利润率：20%自动；
盒影：0 5px 8px 0 rgba（0,0,0,0.2），0 7px 20px rgba（0,0,0,0.17）；
动画名称：modalopen；
动画持续时间：1s；
弯曲方向：立柱；
证明内容：周围的空间；
}
.模态标题{
字号：12号；
颜色：黑色；
}
.模态头h2{
保证金：0；
}
.模态体{
宽度：33.33%；
填充物：5px；
}
.关闭{
颜色：#ccc；
浮动：对；
字体大小：50px；
}
.closeBtn:悬停，.closeBtn:焦点{
颜色：红色；
文字装饰：无；
光标：指针；
}
@关键帧modalopen{
从{opacity:0}
到{opacity:1}
}
/*图像显示样式：*/
形式{
边缘顶部：10px；
填充物：5px；
边界半径：4px；
保证金：0自动；
}
img{
浮动：左；
宽度：150px；
高度：150像素；
右侧填充：15px；
框大小：边框框；
}
img：悬停{
转换：比例（1.5）；
光标：指针；
}

虽然有一些复杂的方式，比如使用提交表单，但最好还是使用简单的方式。下面就是其中之一

在表单中添加隐藏字段

      <input type="hidden" name="list" id="list">
  </form>

现在，在阅读器

load

event listener中添加这一行

reader.addEventListener("load", function () {
  var image = new Image();
  //other code       
  //..

  image.src = this.result;
  image.onclick = function(){ addToArr(file.name); } // <-- this line

  preview.appendChild( image );

  }, false);

reader.addEventListener（“加载”，函数（）{
var image=新图像（）；
//其他代码
//..
image.src=this.result；
image.onclick=function（）（去某处处理）。我可以显示用户上载的图像，但他们可能不想要从批量中拾取的所有图像。因此，我认为单击一个图像添加到数组将有助于解决问题，以便可以提交数组中的所有选定图像。要回答您关于服务器使用的语言的问题，我们只被告知要实现HTML、CSS和d JS-我们正在使用Tornado API，该API从AWS S3数据库请求，然后将图像返回给我们，我们必须在屏幕上显示该图像…然后允许用户选择要在表单中处理的图像…此信息有用吗？不确定这是否会影响您编写的内容…我明白了..Tornado API是否返回JS在包含图像的URL时？类似于，然后将JSON.parse（）转换为javascript结构，循环并执行
var image=new image（）；
…我相信它确实返回JSON！
reader.addEventListener("load", function () {
  var image = new Image();
  //other code       
  //..

  image.src = this.result;
  image.onclick = function(){ addToArr(file.name); } // <-- this line

  preview.appendChild( image );

  }, false);