0

ユーザーがそれぞれのフォームの情報を編集できるようにするフォームがページにたくさんあります。フォームへの入力の 1 つは、画像のアップロードです。

フォームは以下のフォームです。

<form class="myForm" ...>
    <div class="imagePreview"></div>
    <input type="file" name="myImage" onchange="handleFiles(this.files)" />
</form>

そして、次のように画像プレビューを処理する JavaScript があります。

function handleFiles(files) {
    $(".obj").remove();
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var imageType = /image.*/;

        if (!file.type.match(imageType)) {
            continue;
        }

        var pic_div = document.getElementById("imagePreview");
        var img = document.createElement("img");
        img.classList.add("obj");
        img.file = file;
        pic_div.appendChild(img);

        var reader = new FileReader();
        reader.onload = (
            function(aImg) { 
                return function(e) { 
                    aImg.src = e.target.result; 
                }; 
            }
        )(img);
        reader.readAsDataURL(file);
    }
}

行を置き換えたい：

var pic_div = document.getElementById("imagePreview");

適切な行で。これは私が混乱しているところです。クラス myForm の THIS FORM に対してクラス「imagePreview」の div を参照する方法がわかりません。

どんな助けでも大歓迎です。

4

1 に答える 1

1

問題は、Idを使用してdivを取得していることです。imagePreviewフォーム内のdivにimagePreviewCSSクラスがある場合、実行できることは、divに必要なIDを指定することです。

<div id="imagePreview"></div>

または、同じクラスの複数のdivがある場合は、次のようにjQueryを使用してそれらを取得します。

$(".imagePreview").each(function(index){
    //Do Something
});

または：

var pic_div = $(".imagePreview")[0]
于 2013-03-08T20:16:52.860 に答える