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

HTMLは、ページに挿入されるときに要素に解析されますが、1対1で翻訳可能な2つの形式を意味するわけではありません。

要素をHTML文字列outerHTMLに変換するために使用できます。<img>しかし、これは効率的ではありません。要素を文字列に変換して、要素として再度解析するだけです。ちょっとずさん。

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

タグを文字列として作成でき<img>ます。

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

しかし、それも毛むくじゃらになり始めます。したがって、最後に、他のhtmlを作成した後にimage要素を追加できます。

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

ただし、考えてみてください。JSにこれほど多くのHTMLが含まれ始めたら、アプローチを少し考え直したほうがいいかもしれません。維持するのは難しく、ヒューマンエラーが発生しやすいパターンです。

于 2012-10-26T15:44:06.390 に答える
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 に答える
0

他の人が言ったように、DOM要素を表すために文字列を使用することを避ける/選択する理由があります。また、html 要素を表現する両方の方法を混在させようとするのは、少し読みにくいコードです。そうは言っても、結果（スタック？）に適切な文字列を挿入する代わりに、画像自体を要素として作成することをスキップできます。

これにより、望ましいスケーリング効果が得られます。

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 に答える
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これを本当に避けたい場合は、画像を別の出力スタイルの配列に貼り付けることができます。しかし、これはそれほどクリーンではなく、2 つの配列の内容が同期しなくなるリスクがあります。私は、同じオブジェクトの 2 つの個別のプロパティを、よりクリーンで優れたものにすることに固執します。

于 2012-10-26T15:40:30.020 に答える