jQueryを使用して追加する

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>クラスimage-containerとのdivの内側に位置している他の<IMG>年代、で表示されるようにしたいと思います。

私はここにメッセージのすべてを持っていると思います。どんな助けも素晴らしいだろう。

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

がここに答えている：

さてさて、ここで答えは何であったかです。次のコード行が表示されます上：

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

をしかし、DOMツリーを横断した後、私は私がイメージを置きたいのだ実際の場所であるためにこれを設定するために必要なことが分かりました。だから、var $blockが実際に次のようである。その後

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

、私はそれが同様に画像を置く場所を変更しなければなりませんでした。

Answer 1

あなたの投稿はあまり明確ではありません。しかし、少し理解していれば、イメージを送信し、アプリケーションのバックエンドから応答を得ることです。 私はそれが間違っている場合は申し訳なく思っていますが、私は正しい場合。次に、私の答えです -

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