上传时如何在图像预览中添加文本区域答案

【问题标题】：How to add a textarea to the image preview when uploading上传时如何在图像预览中添加文本区域
【发布时间】：2019-03-22 02:06:24
【问题描述】：

我已经为这个问题苦苦挣扎了 3 天。任何帮助将不胜感激！

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

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

这里是 CodePen 代码：https://codepen.io/anon/pen/VEQMwm

提前感谢您的帮助。

另外，代码如下：

// ---------- THIS IS FOR THE POPUP ---------- //
  function CustomAlert() {
     this.performCustomAlert = function (dialog) {
        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 = function () {
        document.getElementById('dialogbox').style.display = "none";
        document.getElementById('dialogoverlay').style.display = "none";
     }
  }

  var newAlert = new CustomAlert();

  // ------------- TABS ----------------- //
  function openTab(evt, tabName) {
      var i, tabcontent, tablinks;
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i < tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
      }
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i < tablinks.length; i++) {
          tablinks[i].className = tablinks[i].className.replace(" active", "");
      }
      document.getElementById(tabName).style.display = "block";
      evt.currentTarget.className += " active";
  }

  document.getElementById("defaultOpen").click();

  // ---------------- UPLOAD --------------------------//
  // ************************ Drag and drop ***************** //
  let dropArea = document.getElementById("drop-area")

  // Prevent default drag behaviors
  ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, preventDefaults, false)   
    document.body.addEventListener(eventName, preventDefaults, false)
  })

  // Highlight drop area when item is dragged over it
  ;['dragenter', 'dragover'].forEach(eventName => {
    dropArea.addEventListener(eventName, highlight, false)
  })

  ;['dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, unhighlight, false)
  })

  // Handle dropped files
  dropArea.addEventListener('drop', handleDrop, false)

  function preventDefaults (e) {
    e.preventDefault()
    e.stopPropagation()
  }

  function highlight(e) {
    dropArea.classList.add('highlight')
  }

  function unhighlight(e) {
    dropArea.classList.remove('active')
  }

  function handleDrop(e) {
    var dt = e.dataTransfer
    var files = dt.files

    handleFiles(files)
  }

  let uploadProgress = []
  let progressBar = document.getElementById('progress-bar')

  function initializeProgress(numFiles) {
    progressBar.value = 0
    uploadProgress = []

    for(let i = numFiles; i > 0; i--) {
      uploadProgress.push(0)
    }
  }

  function updateProgress(fileNumber, percent) {
    uploadProgress[fileNumber] = percent
    let total = uploadProgress.reduce((tot, curr) => tot + curr, 0) / uploadProgress.length
    console.debug('update', fileNumber, percent, total)
    progressBar.value = total
  }

  function handleFiles(files) {
    files = [...files]
    initializeProgress(files.length)
    files.forEach(uploadFile)
    files.forEach(previewFile)
  }

  function previewFile(file) {
    let reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onloadend = function() {
      let img = document.createElement('img')
      img.src = reader.result
      document.getElementById('gallery').appendChild(img)
    }
  }

  function uploadFile(file, i) {
    var xhr = new XMLHttpRequest()
    var formData = new FormData()
    xhr.open('POST', true)
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')

    // Update progress (can be used to show progress indicator)
    xhr.upload.addEventListener("progress", function(e) {
      updateProgress(i, (e.loaded * 100.0 / e.total) || 100)
    })

    xhr.addEventListener('readystatechange', function(e) {
      if (xhr.readyState == 4 && xhr.status == 200) {
        updateProgress(i, 100) // <- Add this
      }
      else if (xhr.readyState == 4 && xhr.status != 200) {
        // Error. Inform the user
      }
    })

    formData.append('upload_preset', 'ujpu6gyk')
    formData.append('file', file)
    xhr.send(formData)
  }

.add-photo{
    width: 18%;
    background-color: #00a100;
    color: #fff;
    padding: 11px 13px;
    border: 3px solid #00a100;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
    cursor: pointer;
    text-align: center;
    font-size: 13px;
    font-weight: 550;
    border-radius: 1px;
    margin-left: 41%;
  }

  * {
      box-sizing: border-box;
  }

  #dialogoverlay {
    display: none;
    opacity: 0.5;
    /*so that user can see through it*/
    position: fixed;
    top: 0px;
    left: 0px;
    background: black;
    z-index: 10;
    height: 100%;
    width: 100%;
  }

  #dialogbox {
    display: none;
    position: fixed;
    background: #ffffff;
    border-radius: 1px;
    border: 0.5px solid #ccc;
    z-index: 10;
    left: 25%;
    top: 20%;
    width: 50%;
    height: 400px;
    -webkit-animation: fadeEffect 0.3s;
    animation: fadeEffect 0.3s;
  }

  #close-popup {
    float: right;
    background-color: red;
    color: #474747;
    font-size: 15px;
  }

  .header{
    position: absolute;
    width: 100.2%;
    background-color: white;
    height: 11%;
    top: 5.4%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .content-centre{
    width: 99%;
    height: 77%;
    margin-left: 3px;
    margin-top: 46px; 
  }

  #content-leftside{
    width: 65%;
    height: 100%;
    float: left;
  }

  .tab {
    overflow: hidden;
  }

  .tab button {
    width: 33.3%;
    height: 14%;
    background-color: #acacac;
    float: left;
    color: white;
    outline: none;
    cursor: pointer;
    padding: 6px;
    transition: 0.3s;
    border-right: 1px solid #fff;
  }

  .tab button:hover {
    background-color: #474747;
  }

  .tab button.active {
    background-color: #474747;
  }

  .tabcontent {
    display: none;
    padding: 6px 12px;
  }

  #content-rightside{
    width: 35%;
    height: 100%;
    float: right;
    background-color: #ffffff;
    border-left: 1px solid #dddddd;
  }

  #right-topbar{
    width: 100%;
    height: 9%;
    background-color: #474747;
    color: #fff;
    padding: 5px;
    text-align: center;
    transition: 0.3s;
  }

  .footer{
    position: absolute;
    width: 100.2%;
    background-color: #474747;
    height: 11%;
    bottom: -5.6%;
    left: 50%;
    /* top: calc(50% - 50px); */
    transform: translate(-50%, -50%);
  }


  /*------------------- UPLOAD AREA -----------------------*/

  #drop-area {
    border: 2px dashed #ccc;
    border-radius: 8px;
    width: 98%;
    margin: 24px auto;
    padding: 15px;
  }

  #progress-bar{
    display: none;
  }

  #gallery {
    margin-top: 5%;
  }

  #gallery img {
    width: 55px;
    height: 50px;
    margin-bottom: 10px;
    margin-left: 10px
  }

  .button {
    display: inline-block;
    padding: 10px;
    background: #00a100;
    color: #fff;
    cursor: pointer;
    border-radius: 5px;
  }

  #fileElem {
    display: none;
  }

  #upload-button{
    font-size: 40px;
    color: #00a100;

<button class="add-photo" onclick="newAlert.performCustomAlert()">ADD MY PHOTO</button> 
    <div class="popup-upload">
      <div id="dialogoverlay"></div>
      <!--------------- SELECT MEDIA BOX ---------------->
      <div id="dialogbox">
        <!--------------- HEADER OF THE BOX ---------------->
        <div class="header">
          <!--------------- CLOSE POPUP ---------------->
          <button id="close-popup" onclick="newAlert.ok()"><i class="fa fa-times" style="margin-top: 8px; margin-right: 7px;"></i></button>
          <div class="select-media">
              <i class="fa fa-camera" id="select-camera"></i>
              <h2 id="select-media">SELECT YOUR MEDIA</h2>
          </div>
        </div>

        <!--------------- CONTENT OF THE BOX ---------------->
        <div class="content-centre">
          <!--------------- LEFT CONTENT ---------------->
          <div id="content-leftside">
            <div class="tab">
              <button class="tablinks" id="defaultOpen" onclick="openTab(event, 'Desktop')"><span class="fa fa-desktop"></span>&nbsp; Desktop</button>
              <button class="tablinks" onclick="openTab(event, 'Facebook')"><span class="fa fa-facebook"></span>&nbsp; Facebook</button>
              <button class="tablinks" onclick="openTab(event, 'Instagram')"><span class="fa fa-instagram"></span>&nbsp; Instagram</button>
            </div>

            <div id="Desktop" class="tabcontent">
              <div id="drop-area">
                <form class="my-form">
                  <span class="fa fa-cloud-upload" id="upload-button"></span>
                  <p id="drag-text">Drag & Drop Your <br> Photos or Videos <br> To Upload</p>
                  <input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
                  <label class="button" for="fileElem">or Select Files</label>
                </form>
              </div>
            </div>

            <div id="Facebook" class="tabcontent">
              <h3>Facebook</h3>
            </div>

            <div id="Instagram" class="tabcontent">
              <h3>Instagram</h3>
            </div>
          </div>
          <!--------------- RIGHT CONTENT ---------------->
          <div id="content-rightside">
            <!--------------- RIGHT TOPBAR ---------------->
            <div id="right-topbar">
              <h1>Selected Media</h1>
            </div>
            <progress id="progress-bar" max=100 value=0></progress>
            <div id="gallery"/></div>
          </div>
        </div>
        <div class="footer">
        </div>
      </div>
    </div>
  </div>

【问题讨论】：

您已经描述了您想要做什么，并且您已经展示了很多代码（可能太多了）...但是您没有提到什么是阻止你或你遇到了什么问题。你有什么问题？
我的问题是如何将文本区域添加到图像预览中以及如何将图片与文本区域一起删除
如果您尝试并遇到特定问题，我们可以提供帮助。但恐怕这里不是寻找一般辅导帮助的地方。我们鼓励您在此处了解有关此社区如何为您提供帮助的更多信息：stackoverflow.com/tour
@P.Pann，这不是 SO 的工作方式。你不会把工作任务带进来并要求：为我做这件事。你应该问：我正在这个元素上尝试这个方法，我期待这个结果，根据这个文档。为什么它会给我这个其他结果？请添加minimal reproducible example。同样，最小。您的代码中到底有什么不起作用？您是否阅读过该方法的规范？提供上述任何内容的链接。
“我只是在询问一些信息” - 只是，你实际上并没有询问任何东西。您需要提出具体的问题，描述您遇到的确切问题。 “所以，如果有人知道并知道如何做，我会非常乐意听” - 不，这个网站也不是播客。我们不会在这里传播无穷无尽的知识流，您只需要收听即可。如果您需要解释问题基础的教程，那么您需要去其他地方寻找它们。

标签： javascript jquery html css xmlhttprequest

【解决方案1】：

查看下面的代码，我对 previewFile() 函数进行了一些更改。我希望，通过查看下面的代码，您可以有所了解。

// ---------- THIS IS FOR THE POPUP ---------- //
function CustomAlert() {
  this.performCustomAlert = function(dialog) {
    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 = function() {
    document.getElementById('dialogbox').style.display = "none";
    document.getElementById('dialogoverlay').style.display = "none";
  }
}

var newAlert = new CustomAlert();

// ------------- TABS ----------------- //
function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}

document.getElementById("defaultOpen").click();

// ---------------- UPLOAD --------------------------//
// ************************ Drag and drop ***************** //
let dropArea = document.getElementById("drop-area")

// Prevent default drag behaviors
;
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
  dropArea.addEventListener(eventName, preventDefaults, false)
  document.body.addEventListener(eventName, preventDefaults, false)
})

// Highlight drop area when item is dragged over it
;
['dragenter', 'dragover'].forEach(eventName => {
  dropArea.addEventListener(eventName, highlight, false)
})

;
['dragleave', 'drop'].forEach(eventName => {
  dropArea.addEventListener(eventName, unhighlight, false)
})

// Handle dropped files
dropArea.addEventListener('drop', handleDrop, false)

function preventDefaults(e) {
  e.preventDefault()
  e.stopPropagation()
}

function highlight(e) {
  dropArea.classList.add('highlight')
}

function unhighlight(e) {
  dropArea.classList.remove('active')
}

function handleDrop(e) {
  var dt = e.dataTransfer
  var files = dt.files

  handleFiles(files)
}

let uploadProgress = []
let progressBar = document.getElementById('progress-bar')

function initializeProgress(numFiles) {
  progressBar.value = 0
  uploadProgress = []

  for (let i = numFiles; i > 0; i--) {
    uploadProgress.push(0)
  }
}

function updateProgress(fileNumber, percent) {
  uploadProgress[fileNumber] = percent
  let total = uploadProgress.reduce((tot, curr) => tot + curr, 0) / uploadProgress.length
  console.debug('update', fileNumber, percent, total)
  progressBar.value = total
}

function handleFiles(files) {
  files = [...files]
  initializeProgress(files.length)
  files.forEach(uploadFile)
  files.forEach(previewFile)
}

function previewFile(file) {
  let reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onloadend = function() {
    let img = document.createElement('img')
    img.src = reader.result

    var mainDiv = document.createElement("div")
    mainDiv.className = "box"
    mainDiv.appendChild(img)

    var textbx = document.createElement("textarea")
    textbx.placeholder ="Caption..."
    mainDiv.appendChild(textbx)

    var btn = document.createElement("button")
    var tx = document.createTextNode("X");
    btn.onclick = function() {
      $(this).closest(".box").remove()
    }
    btn.appendChild(tx);
    mainDiv.appendChild(btn)

    document.getElementById('gallery').appendChild(mainDiv)

  }
}

function uploadFile(file, i) {
  var xhr = new XMLHttpRequest()
  var formData = new FormData()
  xhr.open('POST', true)
  xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')

  // Update progress (can be used to show progress indicator)
  xhr.upload.addEventListener("progress", function(e) {
    updateProgress(i, (e.loaded * 100.0 / e.total) || 100)
  })

  xhr.addEventListener('readystatechange', function(e) {
    if (xhr.readyState == 4 && xhr.status == 200) {
      updateProgress(i, 100) // <- Add this
    } else if (xhr.readyState == 4 && xhr.status != 200) {
      // Error. Inform the user
    }
  })

  formData.append('upload_preset', 'ujpu6gyk')
  formData.append('file', file)
  xhr.send(formData)
}

  .add-photo {
  width: 18%;
  background-color: #00a100;
  color: #fff;
  padding: 11px 13px;
  border: 3px solid #00a100;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  cursor: pointer;
  text-align: center;
  font-size: 13px;
  font-weight: 550;
  border-radius: 1px;
  margin-left: 41%;
}

* {
  box-sizing: border-box;
}

#dialogoverlay {
  display: none;
  opacity: 0.5;
  /*so that user can see through it*/
  position: fixed;
  top: 0px;
  left: 0px;
  background: black;
  z-index: 10;
  height: 100%;
  width: 100%;
}

#dialogbox {
  display: none;
  position: fixed;
  background: #ffffff;
  border-radius: 1px;
  border: 0.5px solid #ccc;
  z-index: 10;
  left: 25%;
  top: 20%;
  width: 50%;
  height: 400px;
  -webkit-animation: fadeEffect 0.3s;
  animation: fadeEffect 0.3s;
}

#close-popup {
  float: right;
  background-color: red;
  color: #474747;
  font-size: 15px;
}

.header {
  position: absolute;
  width: 100.2%;
  background-color: white;
  height: 11%;
  top: 5.4%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.content-centre {
  width: 99%;
  height: 77%;
  margin-left: 3px;
  margin-top: 46px;
}

#content-leftside {
  width: 65%;
  height: 100%;
  float: left;
}

.tab {
  overflow: hidden;
}

.tab button {
  width: 33.3%;
  height: 14%;
  background-color: #acacac;
  float: left;
  color: white;
  outline: none;
  cursor: pointer;
  padding: 6px;
  transition: 0.3s;
  border-right: 1px solid #fff;
}

.tab button:hover {
  background-color: #474747;
}

.tab button.active {
  background-color: #474747;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
}

#content-rightside {
  width: 35%;
  height: 100%;
  float: right;
  background-color: #ffffff;
  border-left: 1px solid #dddddd;
}

#right-topbar {
  width: 100%;
  height: 9%;
  background-color: #474747;
  color: #fff;
  padding: 5px;
  text-align: center;
  transition: 0.3s;
}

.footer {
  position: absolute;
  width: 100.2%;
  background-color: #474747;
  height: 11%;
  bottom: -5.6%;
  left: 50%;
  /* top: calc(50% - 50px); */
  transform: translate(-50%, -50%);
}


/*------------------- UPLOAD AREA -----------------------*/

#drop-area {
  border: 2px dashed #ccc;
  border-radius: 8px;
  width: 98%;
  margin: 24px auto;
  padding: 15px;
}

#progress-bar {
  display: none;
}

#gallery {
  margin-top: 5%;
}

#gallery img {
  width: 55px;
  height: 50px;
  margin-bottom: 10px;
  margin-left: 10px
}

.button {
  display: inline-block;
  padding: 10px;
  background: #00a100;
  color: #fff;
  cursor: pointer;
  border-radius: 5px;
}

#fileElem {
  display: none;
}

#upload-button {
  font-size: 40px;
  color: #00a100;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="add-photo" onclick="newAlert.performCustomAlert()">ADD MY PHOTO</button>
<div class="popup-upload">
  <div id="dialogoverlay"></div>
  <!--------------- SELECT MEDIA BOX ---------------->
  <div id="dialogbox">
    <!--------------- HEADER OF THE BOX ---------------->
    <div class="header">
      <!--------------- CLOSE POPUP ---------------->
      <button id="close-popup" onclick="newAlert.ok()"><i class="fa fa-times" style="margin-top: 8px; margin-right: 7px;"></i></button>
      <div class="select-media">
        <i class="fa fa-camera" id="select-camera"></i>
        <h2 id="select-media">SELECT YOUR MEDIA</h2>
      </div>
    </div>

    <!--------------- CONTENT OF THE BOX ---------------->
    <div class="content-centre">
      <!--------------- LEFT CONTENT ---------------->
      <div id="content-leftside">
        <div class="tab">
          <button class="tablinks" id="defaultOpen" onclick="openTab(event, 'Desktop')"><span class="fa fa-desktop"></span>&nbsp; Desktop</button>
          <button class="tablinks" onclick="openTab(event, 'Facebook')"><span class="fa fa-facebook"></span>&nbsp; Facebook</button>
          <button class="tablinks" onclick="openTab(event, 'Instagram')"><span class="fa fa-instagram"></span>&nbsp; Instagram</button>
        </div>

        <div id="Desktop" class="tabcontent">
          <div id="drop-area">
            <form class="my-form">
              <span class="fa fa-cloud-upload" id="upload-button"></span>
              <p id="drag-text">Drag & Drop Your <br> Photos or Videos <br> To Upload</p>
              <input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
              <label class="button" for="fileElem">or Select Files</label>
            </form>
          </div>
        </div>

        <div id="Facebook" class="tabcontent">
          <h3>Facebook</h3>
        </div>

        <div id="Instagram" class="tabcontent">
          <h3>Instagram</h3>
        </div>
      </div>
      <!--------------- RIGHT CONTENT ---------------->
      <div id="content-rightside">
        <!--------------- RIGHT TOPBAR ---------------->
        <div id="right-topbar">
          <h1>Selected Media</h1>
        </div>
        <progress id="progress-bar" max=100 value=0></progress>
        <div id="gallery" /></div>
    </div>
  </div>
  <div class="footer">
  </div>
</div>
</div>
</div>

【讨论】：

【解决方案2】：

只需用这个替换 previewFile 函数。

  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);
    }
  }

【讨论】：