jQuery를 사용하여 목록에 동적으로 추가하기

Question

나는 사진과 이름을 그림으로 가지고있는 목록을 가지고 있습니다. 사용자가 그림과 이름을 업로드하고 추가 할 수 있도록 javascript/jquery를 사용하는 것이 가능합니까? 그 목록? 나는 폼 요소에 텍스트를 동적으로 추가 할 수 있지만 이것을 처리하지는 못했다. 여기에 내가 내 다른 폼 요소에 대한이 jQuery를 사용하지만 분명히 내 목록과 사진 작업을 나던 내 코드

HTML

<ul id="list"> 
     <p> 
     <li><img src="products/apple.png" width="30" height="30" align="absmiddle"/> <a href="#/Apple/">Apple</a></li> 
     <li><img src="products/Banana.png" width="30" height="30" align="absmiddle"/> <a href="#/Squash/">Banana</a></li> 
     <li><img src="products/BlackBerry.png" width="30" height="30" align="absmiddle"/> <a href="#/Broccoli/">BlackBerry</a></li> 
     <li><img src="products/cherries.png" width="30" height="30" align="absmiddle"/> <a href="#/Carrot/">Cherries</a></li> 
     <li><img src="products/coconut.png" width="30" height="30" align="absmiddle"/> <a href="#/Celery/">Coconut</a></li> 
     <li><img src="products/grapes.png" width="30" height="30" align="absmiddle"/> <a href="#/Lettuce/">Grapes</a></li> 
     <li><img src="products/kiwi.png" width="30" height="30" align="absmiddle"/> <a href="#/Mushroom/">Kiwi</a></li> 
     <li><img src="products/lemon.png" width="30" height="30" align="absmiddle"/> <a href="#/Onion/">Lemon</a></li> 
     <li><img src="products/lime.png" width="30" height="30" align="absmiddle"/> <a href="#/Potato/">Lime</a></li> 
     <li><img src="products/Orange.png" width="30" height="30" align="absmiddle"/> <a href="#/Pumpkin/">Orange</a></li> 
     <li><img src="products/peach.png" width="30" height="30" align="absmiddle"/> <a href="#/Radish/">Peach</a></li> 
     <li><img src="products/Strawberry.png" width="30" height="30" align="absmiddle"/> <a href="#/strawberry/">Strawberry</a></li> 
     <li><img src="products/Watermelon.png" width="30" height="30" align="absmiddle"/> <a href="#/SugarSnaps/">Watermelon</a></li> 

     <input type="text" id="New_ingredient_1" name="New_ingredient[]" value="" placeholder="add Ingredient"/> 

     </p> 
    </ul> 

입니다. 매트가 지적한대로에 enctype = "multipart/form-data"로하고 사용을 업로드 할 Ajax 호출을 구현하는 양식을 사용할 수 있습니다 가능하면

$(document).ready(function() { 
    var addDiv2 = $('#list'); 
    var i = $('#list p').size() + 1; 

    $('#list').on('click', function() { 
    $('<p> <input id="New_ingredient_' + i + '" size="40" name="New_ingredient[]' + '" type=text" value="" placeholder="Ingredient" /><input id="quantity_' + i + '" size="40" name="quantity[]' + '" type=text" value="" placeholder="Quantity" /><a href=#" class="remNew2"> Remove </a> </p> ').appendTo(addDiv2); 
    i++; 
    return false; 

    }); 

    $(document).on('click', '.remNew2', function() { 
     if (i > 1) { 

      $(this).parents('p').remove(); 
      i--; 
     } 
     return false; 
    }); 

}); 

Answer 1

당신은 말했다 업로드 이미지에 대한 서버 측 코드가 필요 이미지

업로드에 대한

자세한 내용은 여기에서 찾을 수 있습니다 : jQuery Ajax File Upload이

나는이 (AJAX IFRAME 방법 (AIM))와 successfuly을 구현 한

: 업로드가 완료되면 http://www.webtoolkit.info/ajax-file-upload.html

추가합니다 귀하의 목록에 정보.