Javascript 图像上传前的多个缩略图

我在Javascript/Jquery方面非常缺乏经验，因此我使用来处理图像上传过程的前端。

问题：
我想上传多张图像，而不仅仅是一张，因此还想显示所有图像，这些图像将作为缩略图上传。目前只有一幅图像显示为缩略图。


（仅显示一个缩略图）


HTML（相关部分）

这仅适用于支持或API的浏览器

我尝试循环待上载的图像：

replaceResults = function (img) {
        var content;
        var imageFiles = document.getElementById("upload-post-images"),
        filesLength = imageFiles.files.length;

        // Loop through the FileList and render image files as thumbnails.
        for (var i = 0; i < filesLength; i++) {
            if (!(img.src || img instanceof HTMLCanvasElement)) {
                content = $('<span>Die Bilddatei konnte nicht geladen werden.</span>');
            } else {
                content = $('<a target="_blank">').append(img)
                    .attr('download', currentFile.name)
                    .attr('href', img.src || img.toDataURL());
            }
            result.children().replaceWith(content);
            if (img.getContext) {
                actionsNode.show();
            }
        } // end for loop
    },

replaceResults=函数（img）{
var含量；
var imageFiles=document.getElementById（“上传帖子图像”），
filesLength=imageFiles.files.length；
//循环浏览文件列表并将图像文件渲染为缩略图。
对于（var i=0；i

 </form>
 <img src="blob:https%3A//fiddle.jshell.net/001bd1f5-1cce-4618-bc83-9c8bd24f9e90" width="200" height="150">
 <img src="blob:https%3A//fiddle.jshell.net/001bd1f5-1cce-4618-bc83-9c8bd24f9e90" width="200" height="150">



在我的项目中（使用您的代码），缩略图放置在结果div中：

<div id="result" class="result">
    <a target="_blank" download="image.jpg" href="data:image/png;base64,iVBO3sSxiFIz6LUNoB9b27d/p9/HzNSojY7M+FCmPOnGAsrVBWlKSGsSfG4GBNOzbIWtW38xtqwSLsTpzHF7/N4n7PwQgrIo5fh...></a>
    <canvas width="265" height="354"></canvas>
</div>





你有没有可能知道为什么会这样，或者我怎样才能改变它？！


非常感谢您的大力帮助！
您需要将更改功能更改为：

document.getElementById('upload-post-images').onchange = function (e) {
    for(i = 0; i<=e.target.files.length; i++)
    {
       loadImage(
          e.target.files[i],
          function (img) {
              document.body.appendChild(img);
          },
          {maxWidth: 200} // Options
       );
    }
};

因此，由于这一行：

e.target.files[0]

始终只从图像数组传递一个图像（第一个）

享受！：）

更新

关于你的更新-所以基本上都是关于loadImage函数中的第二个参数。
更改你的
上传帖子图像
更改事件，如下所示

document.getElementById('upload-post-images').onchange = function (e) {
    $.each(e.target.files, function () {
        loadImage(
          this,
          function (img) {
              document.body.appendChild(img);
          }, {
              maxWidth: 200
          } // Options
        )
    });
};

太好了！这并没有解决我的问题，但至少现在我知道这个部分应该可以工作了。谢谢！我更新了我的问题。你有没有可能用这个为我指出正确的方向？非常感谢你的帮助！！@kringeltore关于你在JSFIDLE中的更新，已经定义了一些函数，比如replaceResults，displayImage等。还有变量var result=$（'#result'），这是您的result div。在jsfiddle中，这些函数没有使用，但我猜在您的中它们是。例如，这一行：result.children（）.replaceWith（content）；可能会导致图像被追加到div结果中。因此，基本上，这都是关于js FIDLE中loadImage函数的第二个参数：function（img）{document.body.appendChild（img）；}，不，img是单映像，您需要在循环中执行loadImage函数，就像在JSFIDLE中一样，我更新了JSFIDLE。所以基本上loadImage函数只能在一个img中工作，但如果您想在循环中加载多个映像，请运行loadImage函数谢谢！Piotr Czarnecki速度更快，更具弹性。因此，我同意他的回答。我编辑了我的问题。你有机会帮我吗？非常感谢你的帮助！！
e.target.files[0]

document.getElementById('upload-post-images').onchange = function (e) {
    $.each(e.target.files, function () {
        loadImage(
          this,
          function (img) {
              document.body.appendChild(img);
          }, {
              maxWidth: 200
          } // Options
        )
    });
};