jQuery를 사용하여 추가

Question

좋아요, 이것은 정말 긴 게시물입니다. 이미지를 삽입하려면 여러 DOM 트리 구조가 있어야합니다. 기록을 위해 이미지는 PARAM에 전달됩니다. 왜 내가 게시하지 않는지 이해할 수 없다. 그래서, 제가 현재 사용하고있는 코드는 다음과 같습니다.

<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> 클래스 image-container와 사업부의 내부에있는 다른 <IMG> 년대로 표시 할, 다음과 같이

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로입니다.

나는 여기에 메시지의 모든 것을 가지고 있다고 생각합니다. 어떤 도움이라도 좋을 것입니다. 여기,

좋아 대답이 무엇이다 :

편집 편집 편집 편집 편집 편집 여기

는 대답이다. 다음 코드 줄을 볼 수 위 :

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() 등과 같은 함수로 파일을 데이터로 보낼 수 없습니다.