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>

现在，我希望<IMG>与其他的一起出现<IMG>，它们位于带有 class 的 div 内部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 回答
0

6年后，我会回答我自己的问题。哈哈

好的，这就是答案。在上面，您将看到以下代码行：

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');
于 2018-04-03T18:58:48.893 回答