Question

好的，这是一个很长的帖子。我有一个多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>

现在，我希望<IMG>与其他<IMG>一起显示，其中image-container位于div的内部。

我想我在这里有所有信息。任何帮助都会很棒。

编辑编辑编辑编辑编辑

以下是答案：

好的，这就是答案。上面你会看到以下代码行：

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

Answer 1

我对你的帖子不是很清楚。但是，如果有一点了解，那就是发送图像并从应用程序的后端获得响应。如果我弄错了，我很抱歉，但如果我是对的。那么这是我的答案 -

您无法使用ajax上传文件。那就是你不能在$ .ajax（），$ .get（），$ .post（）等函数中发送文件作为数据。

Answer 2

6年后，我将回答我自己的问题。 LOL

好的，这就是答案。上面你会看到以下代码行：

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

使用jQuery追加

2 个答案: