一个按钮中的多个图像与预览

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将更改为＆＃34;删除＆＃34;如果点击它将删除所有预览？提前谢谢！

更新

最重要的问题是，＆＃34;显示所有选择的图像，并自动显示到预览＆＃34;

Answer 1

您需要multiple属性，并且需要指定<VirtualHost *:80> ServerName www.example.com ServerAlias example.com Redirect / https://www.example.com/ </VirtualHost> <VirtualHost *:443> ServerName www.example.com ServerAlias example.com ServerAdmin webmaster@local DocumentRoot /path/to/web/content DirectoryIndex index.php index.html ErrorLog logs/error_log CustomLog logs/access combined SSLEngine on SSLCipherSuite ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP:+eNULL SSLCertificateFile /etc/apache2/ssl.crt/certfile.cer SSLCertificateKeyFile /etc/apache2/ssl.key/keyfile.key <Directory "/path/to/web/content/"> Options None AllowOverride None Order allow,deny Allow from all SSLRequireSSL </Directory> </VirtualHost> 是一个数组。

  

multiple（HTML5）

     

此布尔属性指示用户是否可以输入多个值。当type属性设置为email或file时，此属性适用，否则将被忽略。

name

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

  

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

以下演示改编自：

  

Multiple image upload and preview

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

<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>

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;