上传前显示缩略图

Question

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

---

问题：

我想：

1. 上传多张图片，不只是一张，因此也想上传
2. 在结果 div 中显示所有要上传为缩略图的图像。

此时缩略图被附加到末尾。

---

小提琴：

THE FIDDLE

---

HTML（相关部分）：

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

<!-- THUMBNAILS -->
<div id="result" class="result">
    <p>Here the thumbnails should be displayed.</p>
</div>

---

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

// Call the plugin
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
       );
    }
};

我会非常感谢任何形式的帮助！

Answer 1

它附加到末尾，因为这正是您在这里告诉它要做的事情：

document.body.appendChild(img);

这就是将图像附加到正文 - 也就是将其添加到末尾。

您想要做的是将它附加到您的目标 div。你可以用document.querySelector()函数找到div，然后把图片追加到that：

document.querySelector('#result').appendChild(img)

其中“#”表示“有一个 id”，而“.”表示例如，表示“有一类”。如果您在加载 jQuery 的情况下运行此代码，则可以改用 $() 或 jQuery() 函数，但您的代码在 $(function(){}) 块之外，因此它将在 jQuery 加载之前运行。

$(function(){}) 只是 shorthand for $(document).ready(function(){})，它在文档加载（并因此加载 jQuery）时运行封闭的函数。