Question

当我使用<li>和脚本上传图像时，我想自动向媒体列表中添加一个<input type="file">元素。我已经编写了函数，并且一切看起来不错，因为它没有显示错误；但是，我的图像未显示在列表中。有人可以帮忙找出原因吗？

<div class="explorerContainer">
<!--This is the form to upload an image-->
<form method="post" enctype="multipart/form-data">
<div>
  <label for="image_uploads">Try your own image</label>
  <input type="file" id="image_uploads" name="image_uploads">
</div>
<!--Container for images list-->
<div class="medialistContainer">
  <ul class="mediaList">
    <li class="mediaItem" style="background-image: url('./src/images/testImage.jpg')"></li>
    <li class="mediaItem" style="background-image: url('./src/images/testImage2.jpg')"></li>
    <li class="mediaItem" style="background-image: url('./src/images/testImage3.jpg')"></li>
    <li class="mediaItem" style="background-image: url('./src/images/testImage4.jpg')"></li>
    <li class="mediaItem" style="background-image: url('./src/images/testImage5.jpg')"></li>
  </ul>
</div>
<!--This script is for uploading an image-->
<script>
  var input = document.querySelector('input');
  var preview = document.querySelector('.mediaList');

  input.style.visibility = 'hidden';
  input.addEventListener('change', updateImageDisplay);

  function updateImageDisplay() {
    while(preview.firstChild) {
     preview.removeChild(preview.firstChild);
    }
    var curFiles = input.files;
    if(curFiles.length === 0) {
      var para = document.createElement('p');
      para.textContent = 'No files currently selected for upload';
      preview.appendChild(para);
    } else {
        var list = document.createElement('ol');
        preview.appendChild(list);
        for(var i = 0; i < curFiles.length; i++) {
          var listItem = document.createElement('li');
          var para = document.createElement('p');
          if(validFileType(curFiles[i])) {
            para.textContent = 'File name ' + curFiles[i].name + ', file size ' + returnFileSize(curFiles[i].size) + '.';
            var image = document.createElement('img');
            image.src = window.URL.createObjectURL(curFiles[i]);
            listItem.appendChild(image);
            listItem.appendChild(para);
          } else {
            para.textContent = 'File name ' + curFiles[i].name + ': Not a valid file type. Update your selection.';
            listItem.appendChild(para);
            }
            list.appendChild(listItem);
          }
        }
  }

var fileTypes = ['image/jpeg', 'image/pjpeg', 'image/png']

function validFileType(file) {
  for(var i = 0; i < fileTypes.length; i++) {
    if(file.type === fileTypes[i]) {
      return true;
      }
    }
  return false;
}

function returnFileSize(number) {
  if(number < 1024) {
    return number + 'bytes';
  } else if(number > 1024 && number < 1048576) {
      return (number/1024).toFixed(1) + 'KB';
    } else if(number > 1048576) {
       return (number/1048576).toFixed(1) + 'MB';
      }
}
</script>

因此，最重要的是用户上载图像，并且该图像将显示在预览容器中，然后发布到我的媒体列表容器中。这是一个例子：

Answer 1

基本上，您的方法有效（至少对于第一个文件有效），但是请记住，每次选择文件时，输入的files属性都会重置。创建另一个文件数组，从输入中将文件复制到其中，并在循环中使用此新数组。

http://jsfiddle.net/syvpqgn7/

Answer 2

您是否尝试过使用CSS调整列表项的大小？

为什么不生成<li>？我的脚本没有错误

2 个答案: