3

さて、これは本当に長い投稿です。画像を挿入するためにトラバースする必要がある複数の DOM ツリー構造があります。記録のために、画像はPARAM罰金に渡されます。私が理解していないのは、投稿されていない理由です。だから、ここに私が現在使用しているコードがあります。

function validateImage(event) {
    var $input = $(this);
    var width = 75;
    var height = $input.closest('.logo-block').length > 0 ? 35: 75;
    $input.animate({
        'backgroundColor': '#999'
    },
    250);
    $.get('/meta/thumbnail/' + $input.val() + '/' + height + '/' + width + '/',
    function(result) {
        $input.stop();
        if (result != 'No Image Available') {
            $input.css('background-color', '#55FF00');
            var $block = $input.closest('div.thumb-image');
            if ($block.closest('.center-callout-info').length > 0) {
                // in center column, add image.
                $input.val('');
                $('<div class="thumb">' + result + '</div>').appendTo($block.closest('.image-container').not($block.closest('.more-images .image-container'))).find('img').addClass('selected');
            $('.center-callout-info .block img.meta-thumb').click(bindImageSelection);
            }
        } else {
            $input.css('background-color', '#FF0000');
            $input.val('');
        }
        $input.animate({
            backgroundColor: '#FCFCFD'
        },
        2000);
    });
}

HTML は次のとおりです。

<fieldset class="collapsible collapsed">
    <legend class="collapse"><a href="#">Image Management</a></legend>
    <div class="fieldset-wrapper"><input type="button" value="Save Images" id="saveForm" class="submitButton" name="save" />
        <div class="center-callout-info">
            <div class="callout-images">
                <div class="high-res block active-tab" id="46051">
                    <div class = "image-container">
                        <div class="thumb-image thumb selected" id="AVE_BOX_TOPS_EDUCATION_4C">
                        <img class="meta-thumb" height="" src="/thumbs/AVE_Box_Tops_Education_4C.png" title="AVE_BOX_TOPS_EDUCATION_4C" /></div>
                    <div class="thumb-image thumb selected" id="FEL_BANKERS_BOX_BLK">
                        <img class="meta-thumb" height="" src="/thumbs/FEL_BANKERS_BOX_BLK.png" title="FEL_BANKERS_BOX_BLK" /></div>
                    <div class="thumb-image thumb selected" id="FEL_BB_FOLDER_RAILS_BLK">
                        <img class="meta-thumb" height="" src="/thumbs/FEL_BB_Folder_Rails_BLK.png" title="FEL_BB_FOLDER_RAILS_BLK" /></div>
                    <div class="thumb-image thumb selected" id="FEL_SFI_BLK">
                        <img class="meta-thumb" height="" src="No Image Available" title="FEL_SFI_BLK" /></div>
                    <form action="/node/46051/edit"  accept-charset="UTF-8" method="post" id="skuimage-get-more-form">

                        <div><div class="form-item" id="edit-new-high-res-wrapper">
                        <label for="edit-new-high-res">New: </label>
                        <input type="text" maxlength="128" name="new_high_res" id="edit-new-high-res" size="15" value="AVE_AVERY_BLK" class="form-text new-button" />
                        </div>
                        <input type="hidden" name="form_build_id" id="form-de9c77d3f4d32257a52dc609e6697769" value="form-de9c77d3f4d32257a52dc609e6697769"  />
                        <input type="hidden" name="form_token" id="edit-skuimage-get-more-form-form-token" value="f7bb86ba8678fa2fb5b911f1df819bec"  />
                        <input type="hidden" name="form_id" id="edit-skuimage-get-more-form" value="skuimage_get_more_form"  />

                        </div></form>
                        </div></div></div></div></div></fieldset>

ここで、 class の div 内にある<IMG>他の と一緒に表示したいと思います。<IMG>image-container

ここにメッセージのすべてが含まれていると思います。どんな助けでも素晴らしいでしょう。

編集 編集 編集 編集 編集 編集

答えは次のとおりです。

さて、ここに答えがありました。上に、次のコード行が表示されます。

var $block = $input.closest('div.thumb-image');

しかし、DOM ツリーをたどってみると、実際に画像を配置したい場所にこれを設定する必要があることがわかりました。したがって、var $block実際には次のとおりです。

var $block = $input.closest('.image-container');

その後、画像を置く場所も変更する必要がありました。

$('<div class="thumb">' + result + '</div>').appendTo($block).find('img').addClass('selected');
4

2 に答える 2

0

あなたの投稿についてはよくわかりません。しかし、少し理解していれば、それは画像を送信し、アプリケーションのバックエンドから応答を取得することです。間違えたら申し訳ありませんが、正しければ。それからここに私の答えがあります-

ajaxを使用してファイルをアップロードすることはできません。つまり、$。ajax（）、$。get（）、$。post（）などの関数のファイルをデータとして送信することはできません。

于 2012-05-21T00:06:53.727 に答える