图片上传前的多个缩略图

Question

我在 Javascript/Jquery 方面经验不足，因此我使用 JavaScript Load Image plugin 来处理我的图片上传过程的前端。

问题：
我想上传多张图片，不只是一张，因此我也想 ]显示所有要作为缩略图上传的图像。目前只有一张图片显示为缩略图。

The Fiddle: https://jsfiddle.net/r7s3n64b/1/（只显示一张缩略图）

HTML（相关部分）

<!-- FILE INPUT -->
<p><input type="file" name="images[]" id="upload-post-images" multiple></p>

<!-- THUMBNAILS -->
<div id="result" class="result">
    <p>This only works in browsers with support for the <a href="https://developer.mozilla.org/en/DOM/window.URL">URL</a> or <a href="https://developer.mozilla.org/en/DOM/FileReader">FileReader</a> API.</p>
</div><br>

我尝试循环浏览要上传的图片：

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

如有任何帮助，我将不胜感激！！

===编辑===

在 your fiddle 中，缩略图放置在结束表单标签之后：

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

你有没有机会碰巧知道为什么会这样或者我可以如何改变它？！

非常感谢您的巨大帮助！

Answer 1

您需要将更改功能更改为：

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

这是更新的 jsFiddle：https://jsfiddle.net/r7s3n64b/2/

之前您的事件处理程序如下所示：

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

所以因为这条线：

e.target.files[0]

您始终只传递图像数组中的一个图像（第一个）。

尽情享受吧！ :)

更新

关于您的更新 - 所以基本上都是关于 loadImage 函数中的第二个参数。

Answer 2

更改您的 upload-post-images 更改事件，如下所示。

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

图片上传前的多个缩略图

Multiple thumbnails before image upload

javascript

jquery

image

thumbnails

UPDATED FIDDLE