具有预览功能的多个图像在一个按钮中

Question

我有一个小问题的图像上传预览。下面是元素的预览：

​

​

这是密码：

<div class="img-container">
  <img id="preview-1" src="" alt="" />
  <div class="more">
    <img id="preview-2" src="" alt="" />
    <img id="preview-3" src="" alt="" />
    <span>Max 3 images.</span>
  </div>
  <label for="upload-btn" class="button">
    <img src="ssts/img/svg/upload.svg" alt="" />
    <span>UPLOAD</span>
    <input id="upload-btn" name="upload" type="file" accept="image/*"/>
  </label>
</div>

我的问题是，如何在单个按钮中上传多个图像，并自动在元素中显示预览？在填充完所有元素后，upload button将更改为“删除”，如果单击该元素，它将删除所有预览？提前感谢！

更新

最重要的问题是，“显示所有选定的图像，并自动显示到预览”。

Answer 1

您需要multiple属性，并且需要指定name是一个数组。

多重(HTML5) 此布尔属性指示用户是否可以输入多个值。当type属性设置为电子邮件或文件时，此属性将应用，否则将被忽略。

<input id="upload-btn" name="upload[]" type="file" accept="image/*" multiple />

您可以在这里找到一个使用PHP的示例：

How can I select and upload multiple files with HTML and PHP, using HTTP POST?

以下演示是根据这一情况改编的：

Multiple image upload and preview

​

window.onload = function() {
  // Check for File API support.
  if (window.File && window.FileList && window.FileReader) {
    var filesInput = document.getElementById('upload-btn');
    filesInput.addEventListener('change', function(e) {
      var output = document.getElementById('result');
      var files = e.target.files; //FileList object
      
      output.innerHTML = ''; // Clear (previous) results.
      
      for (var i = 0; i < files.length; i++) {
        var currFile = files[i];
        if (!currFile.type.match('image')) continue; // Skip non-images.
        
        var imgReader = new FileReader();
        imgReader.fileName = currFile.name;
        imgReader.addEventListener('load', function(e1) {
          var img = e1.target;
          var div = document.createElement('div');
          div.className = 'thumbnail';
          div.innerHTML = [
            '<img src="' + img.result + '"' + 'title="' + img.fileName + '"/>',
            '<label class="caption">' + img.fileName + '</label>'
          ].join('');
          output.appendChild(div);
        });

        // Read image.
        imgReader.readAsDataURL(currFile);
      }
    });
  } else {
    console.log('Your browser does not support File API!');
  }
}

body {
  padding: 0;
  margin: 0;
}
header {
  background-color: #EEE;
  padding: 0.125em;
}
article {
  margin: 0.5em;
}
output {
  display: block;
}
.thumbnail {
  display: inline-block;
}
.thumbnail img {
  height: 100px;
  margin: 4px;
  border: 1px solid #444;
}
label.caption {
  display: block;
  text-align: center;
  font-style: italic;
  color: #444;
}

<header>
  <h1>File API - FileReader</h1>
</header>
<article>
  <label for="files">Select multiple files: </label>
  <input type="file" id="upload-btn" name="upload[]" accept="image/*" multiple />
  <output id="result" />
</article>

​

​

const IMAGE_LIMIT = 3;
window.onload = function() {
  // Check for File API support.
  if (window.File && window.FileList && window.FileReader) {
    var filesInput = document.getElementById('upload-btn');
    filesInput.addEventListener('change', function(e) {
      var output = document.getElementById('result');
      var files = e.target.files; //FileList object
      
      for (var i = 0; i < files.length; i++) {
        var currFile = files[i];
        if (!currFile.type.match('image')) continue; // Skip non-images.
        
        var imgReader = new FileReader();
        imgReader.fileName = currFile.name;
        imgReader.index = i;
        imgReader.addEventListener('load', function(e1) {
          var img = e1.target;
          var index = img.index;
          if (index < IMAGE_LIMIT) {
            var imgContainer = document.getElementById('preview-' + (index + 1));
            imgContainer.src = img.result;
            imgContainer.title = img.fileName
          }
        });

        // Read image.
        imgReader.readAsDataURL(currFile);
      }
    });
  } else {
    console.log('Your browser does not support File API!');
  }
}

body { padding: 0; margin: 0; background: #DADFE2; }
.img-container {
  width: 284px;
  padding: 0.5em;
  border: 1px solid #AAA;
  background: #EEEEEE;
}
img[id^="preview-"] {
  display: inline-block;
  border: border: 1px solid #777;
  margin: 0.25em;
  background: #DADFE2;
}
#preview-1 {
  width: 256px;
  height: 256px;
}
#preview-2, #preview-3 {
  width: 64px;
  height: 64px;
}
.button {
  display: inline-block;
  margin: 0.25em;
  padding: 0.5em;
  background: #FF6B6F;
  color: #FFF;
  width: 98%;
  text-align: center;
}
.button:hover { cursor: pointer; background: #ff8486; }
.button:active { background: #e55052; }
input[type="file"]#upload-btn {
  display: none;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="img-container">
  <img id="preview-1" src="" alt="" />
  <div class="more">
    <img id="preview-2" src="" alt="" />
    <img id="preview-3" src="" alt="" />
    <span>Max 3 images.</span>
  </div>
  <label for="upload-btn" class="button">
    <i class="fa fa-upload"></i>
    <span>Upload</span>
    <input type="file" id="upload-btn" name="upload[]"  accept="image/*" multiple />
  </label>
</div>

​