上传前显示缩略图

Question

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

问题：

我愿意：

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

目前缩略图已附加到末尾。

Fiddle :

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)

其中“#”表示 'has an id of'，而“.”例如，表示 'has a class of'。如果你在运行加载了 jQuery 的代码，你可以使用 $() 或 jQuery() 函数来代替，但是你的代码在 $(function(){}) 块之外，所以它会在 jQuery 加载之前运行。

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

上传前显示缩略图

Display thumbnails before upload

javascript

jquery

image

thumbnails

问题：

Fiddle :

HTML（相关部分）：

我尝试遍历要上传的图片：