0

我正在尝试通过拖放操作加载多个图像，而不是调整它们的大小并将它们添加为缩略图。调整大小部分非常重要，因为图像可能非常大，我想让缩略图变小。

这是我的代码：

loadingGif(drop);

for (var i=0;i<files.length;i++) {
    var file = files[i];
    var reader = new FileReader();          

    reader.onload = function(e) {
        var src = e.target.result;

        var img = document.createElement('img');            
        img.src = src;
        var scale = 100/img.height;
        img.height = 100;
        img.width = scale*img.width;    

        output.push('<div id="imagecontainer"><div id="image">'+img+'</div><div id="delimage"><img src="img/del.jpg"" /></div></div>');

        if(output.length == files.length) {
            drop.removeChild(drop.lastChild);
            drop.innerHTML += output.join('');
            output.length = 0;
        }
    }

    reader.readAsDataURL(file);
}

正如您可能会告诉我的那样，我在我的拖放区中插入了一个加载 gif 图像，直到所有文件都被加载（output.length == files.length）。加载文件时，我将 html 添加到数组中，如果加载完成，我将打印该数组。问题是我似乎无法将 img 对象（我需要这个对象来调整图像大小）添加到 html 字符串中，这似乎很明显，因为 img 是一个对象......所以我对你们的问题是：怎么做我这样做？:)

4

4 回答 4

2

一般来说，将 DOM 元素作为字符串来玩是个坏习惯。您应该改为使用本机 javascript（或您正在使用的库/框架）命令来创建元素并设置它们的属性。

例如，如果您有一个 id 为“image-container”的元素，其中包含您的所有图像，您可以编写。

var container = document.getElementById( 'image-container' );
var img = document.createElement( 'img' );

container.appendChild( img );

然后，您可以只引用包含所有其他元素的元素，而不是包含所有输出的大 HTML 字符串，并在所有元素加载后立即将其附加到正文，或将其隐藏并显示加载完成后。

if (output.length == files.length) {
    drop.removeChild(drop.lastChild);
    drop.appendChild( container );
    output.length = 0;
}

请记住，ID 必须是唯一的。同一文档中不能有多个具有相同 ID 的元素。

于 2012-10-26T15:43:31.467 回答
2

HTML 在插入页面时被解析为元素，但这并不意味着两种格式可以 1 对 1 翻译。

您可以使用outerHTML将<img>元素转换为 HTML 字符串。但这不会是有效的。您正在将一个元素转换为一个字符串，只是为了再次被解析为一个元素。有点马虎

"<div id='image'>"+ img.outerHTML +"</div>"

您可以将<img>标签构建为字符串。

"<div id='image'><img src='"+ src +"'></div>"

但这也开始变得毛茸茸。所以最后你可以在创建另一个 html 之后附加图像元素。

drop.innerHTML = "<div class='image'></div>"
document.querySelectorAll('.image:last-child')[0].appendChild(img);

然而，值得深思的是：当您开始在 JS 中包含这么多 HTML 时，您可能需要重新考虑一下您的方法。这是一种难以维护且非常容易出现人为错误的模式。

于 2012-10-26T15:44:06.390 回答
0

您可以创建具有任意属性的对象，以便同时保存图像和 HTML 字符串：

var result = {
   html: '<div id="imagecontainer"><div id="image">'+img+'</div><div id="delimage"><img src="img/del.jpg"" /></div></div>',
   imgTag: img
}
output.push(result);

然后稍后当您遍历结果数组时，您可以将这些部分作为result.htmlor访问result.imgTag（将第一部分更改为您已将对象分配给的任何变量）。

这确实意味着您需要将您的 current 更改output.join('')为一个循环，该循环实际上迭代了它们的值output并连接它们的html属性。如果您真的想避免这种情况，您可以将图像粘贴在单独的输出样式数组中。但这并不那么干净，并且存在两个数组内容不同步的风险。我会坚持让同一个对象有两个不同的属性，这样更干净更好。

于 2012-10-26T15:40:30.020 回答
0

正如其他人所说，人们会避免/选择使用字符串来表示 DOM 元素是有原因的。此外，尝试混合表示 html 元素的两种方法，这有点 wtf 时刻阅读代码。也就是说，您可以跳过将图像创建为元素本身，而是将适当的字符串插入结果（堆栈？）。

这将具有所需的缩放效果：

var src = e.target.result;
var imgStr = "<img src='" + src + "' height='" + 100 + "'/>";
ouput.push('<div id="imagecontainer"><div id="image">'+imgStr+'</div><div id="delimage"><img src="img/del.jpg"" /></div></div>');
于 2012-10-26T15:53:17.293 回答