使用jQuery動態添加到列表

我有一個列表，其中包含一張食物的圖片，然後是名稱，是否可以使用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>

我使用這個jQuery我的其他表單元素，但顯然它沒有我的名單和照片上工作。

$(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; 
    }); 

});

來源

2013-12-10 Nick Pocock

將圖像上傳到您的服務器將需要一些服務器端代碼。 – Gaurav

使用輸入類型文件進行瀏覽功能。這應該會返回一個您可以使用的網址。 –

正如馬特指出，你需要服務器端代碼，上傳圖片，這麼說，如果可能的話，你可以用它實現了ENCTYPE =「的multipart/form-data的」，並使用了Ajax調用上傳表單圖像

關於上傳

的更多信息可以在這裏找到：jQuery Ajax File Upload

我有這個（AJAX IFRAME法（AIM））successfuly實現它：http://www.webtoolkit.info/ajax-file-upload.html

當上傳成功後，您將添加將信息發送到您的列表。

來源

2013-12-10 21:00:38

使用jQuery動態添加到列表

回答

相關問題