Javascript 如何在上载时将文本区域添加到图像预览

我已经为这个问题挣扎了整整三天。任何帮助都将不胜感激

我有一个“添加我的照片”按钮，点击后，会弹出一个选项，可以上传一张或更多照片。因此，当我单击“选择文件”按钮或拖放图片或更多图片时，它将在右侧预览图片

我需要的帮助是：当我上传一张或两张图片时，我希望在每张图片的右侧显示一个文本区域，用户可以在其中写入内容（如标题）。此外，在图片和捕获显示后，我需要删除其中一个或全部的选项。这是一张照片：

以下是代码笔代码：

提前谢谢你的帮助

此外，以下是代码：

/------------这是用于弹出窗口-------//
函数CustomAlert（）{
this.performCustomAlert=函数（对话框）{
var windowWidth=window.innerWidth；
var windowHeight=window.innerHeight；
var dialogoverlay=document.getElementById（'dialogoverlay'）；
var dialogbox=document.getElementById（'dialogbox'）；
dialogoverlay.style.display=“block”；
dialogoverlay.style.height=windowHeight+“px”；
dialogbox.style.display=“block”；
}
this.ok=函数（）{
document.getElementById（'dialogbox'）.style.display=“无”；
document.getElementById（'dialogoverlay'）.style.display=“无”；
}
}
var newAlert=new CustomAlert（）；
//------------选项卡------------------//
函数openTab（evt，tabName）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i{
dropArea.addEventListener（eventName、PreventDefault、false）
document.body.addEventListener（eventName、PreventDefault、false）
})
//当项目拖动到拖放区域上时，高亮显示该区域
;['dragenter'，'dragover'].forEach（eventName=>{
dropArea.addEventListener（eventName、highlight、false）
})
;['dragleave'，'drop'].forEach（eventName=>{
dropArea.addEventListener（eventName、unhighlight、false）
})
//处理丢弃的文件
dropArea.addEventListener（'drop'，handleDrop，false）
功能默认值（e）{
e、 预防默认值（）
e、 停止传播（）
}
功能突出显示（e）{
dropArea.classList.add（'highlight'）
}
功能取消高亮度（e）{
dropArea.classList.remove（'active'）
}
函数handleDrop（e）{
var dt=数据传输
var files=dt.files
手文件（文件）
}
让uploadProgress=[]
让progressBar=document.getElementById（'progress-bar'）
函数初始化进程（numFiles）{
progressBar.value=0
上传进度=[]
对于（设i=numFiles；i>0；i--）{
上载进度。推送（0）
}
}
函数updateProgress（文件号，百分比）{
上载进度[文件号]=百分比
让total=上传进度。reduce（（tot，curr）=>tot+curr，0）/uploadProgress.length
console.debug（'update'，fileNumber，percent，total）
progressBar.value=总计
}
函数句柄文件（文件）{
文件=[…文件]
initializeProgress（files.length）
files.forEach（上传文件）
files.forEach（预览文件）
}
函数预览文件（文件）{
let reader=new FileReader（）
reader.readAsDataURL（文件）
reader.onloadend=函数（）{
设img=document.createElement（'img'）
img.src=reader.result
document.getElementById（'gallery'）.appendChild（img）
}
}
函数上载文件（文件，i）{
var xhr=newXMLHttpRequest（）
var formData=new formData（）
xhr.open（'POST'，true）
setRequestHeader（'X-Requested-With'，'XMLHttpRequest'）
//更新进度（可用于显示进度指示器）
xhr.upload.addEventListener（“进度”，函数（e）{
updateProgress（即，（加载*100.0/e.total）| | 100）
})
xhr.addEventListener（'readystatechange'，函数（e）{
如果（xhr.readyState==4&&xhr.status==200）{
updateProgress（i，100）//
选择您的媒体
桌面
脸谱网
一款图片分享应用
拖放照片或视频以上载
或选择文件
脸谱网
一款图片分享应用
选定媒体

查看下面的代码，我对previewFile（）函数做了一些更改。 我希望，通过查看下面的代码，您可以了解这一点

/------------这是用于弹出窗口-------//
函数CustomAlert（）{
this.performCustomAlert=函数（对话框）{
var windowWidth=window.innerWidth；
var windowHeight=window.innerHeight；
var dialogoverlay=document.getElementById（'dialogoverlay'）；
  function previewFile(file) {
    let reader = new FileReader()
    reader.readAsDataURL(file);
    reader.onloadend = function() {
     var gallleryDiv=document.getElementById('gallery');
     var wrapperDiv = document.createElement("div");
     let img = document.createElement('img');
     img.src = reader.result;
     wrapperDiv.className = "wrapperDiv";
     wrapperDiv.appendChild(img)
     var textbx = document.createElement("textarea");
     wrapperDiv.appendChild(textbx);
     var btn = document.createElement("button");
     var tx = document.createTextNode("X");
     btn.onclick = function() {$(this).closest(".wrapperDiv").remove()}
     btn.appendChild(tx);
     wrapperDiv.appendChild(btn);
     gallleryDiv.appendChild(wrapperDiv);
    }
  }