上传前显示缩略图

Display thumbnails before upload

本文关键字：略图 显示      更新时间：2023-09-26

我对Javascript/Jquery非常缺乏经验，因此我使用JavaScript加载图像插件来处理图像上传过程的前端。

<小时 />

问题 ：

我想：

  1. 上传多张图片，而不仅仅是一张，因此也想
  2. 显示所有图像，这些图像将作为缩略图上传到结果div中。

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

<小时 />

小提琴 ：

小提琴

<小时 />

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

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

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

document.body.appendChild(img);

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

您要做的是将其附加到目标div。 您可以使用 document.querySelector（） 函数找到div，然后将图像附加到该div：

document.querySelector('#result').appendChild(img)
例如，其中"#"表示"具有

id"，而"."表示"具有一类"。 如果你在加载 jQuery 的情况下运行此代码，则可以改用 $（） 或 jQuery（） 函数，但你的代码在 $(function(){}) 块之外，因此它将在 jQuery 加载之前运行。

$(function(){})只是$(document).ready(function(){})的简写，它在文档加载（从而加载jQuery）时运行封闭的函数。

相关文章：