如何更改缩略图的样式？答案

【问题标题】：How can I change the style of thumbnails?如何更改缩略图的样式？
【发布时间】：2016-02-19 01:34:36
【问题描述】：

我对 Javascript 和 jQuery 完全没有经验。我想使用 Fileupload 插件使用 jQuery 进行文件上传。它几乎可以正常工作，但我也想预览每张上传的图片，所以我决定在文件的进度条旁边创建上传图片的缩略图。为此，我想通过使用 css 来更改样式。但是如何将缩略图链接到我的 css 文件？那是创建缩略图的代码，我需要一个与我的 css 文件的关系。

add: function (e, data) {
            $('body).append('<img src="' + URL.createObjectURL(data.files[0]) + '"img width="220px" height="120px"/> <link rel="stylesheet" href="/assets/css/style.css"/>');

很遗憾，标签不起作用。

【问题讨论】：

只需将样式表添加到您的页面。当使用正确的名称时，您的 javascript 生成的内容将采用这种风格。
但是如何将样式表添加到我的页面？对不起，我真的是 Javascript 的新手。你能告诉我，我必须如何更改我的代码吗？
只需将链接标签添加到您的 html 页面的头部。（也许您可以发布样式表的内容。）

标签： javascript jquery html css file-upload

【解决方案1】：

1) 您不能在页面加载后附加 CSS 文件。所以从 append 函数中删除标签。

2) 预先在head 标签中添加您的 CSS 文件。

HTML：

<head>
    <!-- head content -->
    <link href="/assets/css/style.css" type="text/css" rel="stylesheet" />
</head>

3) 在您的 CSS 文件中创建一个新的类名，其中包含您希望缩略图具有的样式

CSS：

.myThumbnailStyle{
    width:25%;
    display:inline-block;
    etc...
}

4) 将该类名添加到您的缩略图中 img 标记

$('body).append('<img class='myThumbnailStyle' src="' + URL.createObjectURL(data.files[0]) + '" width="220px" height="120px"/>');

【讨论】：

【解决方案2】：

如果您使用 .css 文件中已经存在的正确类创建图像，它应该会自动应用相应的样式。

另外，不要忘记正确关闭正文选择器

add: function (e, data) {
            $('body').append('<img src="' + URL.createObjectURL(data.files[0]) + '" width="220px" height="120px"/>');

希望对您有所帮助。

【讨论】：

首先感谢您的回复。 css 部分称为#thumbnails，位于/assets/styles.css 中。 Styles.css 包含在内，适用于所有其他用途。但我不知道，在这种情况下如何调用#thumbnails。
你能在你的问题中添加#thumbnails css吗？
当您将id 属性附加到img 标记时，您必须将其添加到body。无论如何，ID 都是一次性使用的，如果你想在多个图像上应用相同的规则，那么你应该使用一个类。