Question

我正在使用这个 html、CSS 和 JavaScript 在上传之前预览多个图像。我在结果区域中获得了很好的图像预览，并且我想显示文件名和按钮以删除文件。我怎样才能做到这一点？谢谢。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">

article {
  width: 80%;
  margin: auto;
  margin-top: 10px;
}
.thumbnail {
  height: 100px;
  margin: 10px;
  border-radius: 10px;
}
</style>
<body>
<form id='post-form' class='post-form' method='post'>
  <label for='files'>Select multiple files: </label>
  <input id='files' type='file' multiple/>
  <output id='result' />
</form>


<script type="text/javascript">
    window.onload = function() {
  if (window.File && window.FileList && window.FileReader) {
    var filesInput = document.getElementById("files");
    filesInput.addEventListener("change", function(event) {
      var files = event.target.files; 
      var output = document.getElementById("result");
      for (var i = 0; i < files.length; i++) {
        var file = files[i];
        //Only pics
        if (!file.type.match('image'))
          continue;
        var picReader = new FileReader();
        picReader.addEventListener("load", function(event) {
          var picFile = event.target;
          var div = document.createElement("div");
          var label = document.createElement("label");
          div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +"title='" + picFile.name + "'/>";

          output.insertBefore(div, null);
          output.insertBefore(label, null);
        });
        
        picReader.readAsDataURL(file);
      }
    });
  } else {
    console.log("Error");
  }
}
</script>
</body>
</html>

多张图片上传预览，文件名为 JavaScript

0 个答案: