Question

我对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"/>');

不幸的是标签不起作用。

Answer 1

1）页面加载后无法附加CSS文件。因此，从追加函数中删除标记。

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"/>');

Answer 2

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

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

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

希望它对你有所帮助。

如何更改缩略图的样式？

2 个答案: