一键多图预览

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 将更改为 "Remove" 如果单击它会删除所有预览？提前致谢！

更新

最重要的问题是，"showing all of choosen images, and automatically show to the preview"

Answer 1

你需要multiple属性，你需要指定name是一个数组。

multiple (HTML5)

This Boolean attribute indicates whether the user can enter more than one value. This attribute applies when the type attribute is set to email or file, otherwise it is ignored.

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

您可以在此处找到使用 PHP 的示例：

以下demo改编自此：

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>

一键多图预览

Multiple image in one button with preview

html

javascript

jquery

frontend

multiple (HTML5)