Javascript 使用jQuery动态添加到列表

我有一个列表，其中有一块食物的图片，然后是名称，是否可以使用javascript/jquery允许用户上传图片和名称并将其添加到列表中？我可以动态地向表单元素添加文本，但还没有解决这个问题。这是我的密码

HTML

我将这个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;
    });

});

$（文档）.ready（函数（）{
var addDiv2=$（“#列表”）；
变量i=$（'#列表p'）.size（）+1；
$（'#list'）。在（'click'，函数（）{
$（'p>
'）。附录（addDiv2）；
i++；
返回false；
});
$（文档）.on（'单击'，'.remNew2'，函数（）{
如果（i>1）{
$（this.parents（'p'）.remove（）；
我--；
}
返回false；
});
});

正如Matt指出的，上传图像需要服务器端代码，也就是说，如果可能，可以使用实现enctype=“multipart/form data”的表单，并使用ajax调用上传图像

有关上载的更多信息，请参见：

我已经成功地实现了它（AJAX IFRAME方法（AIM））：

---

上载完成后，您将把信息添加到列表中。

将图像上载到服务器将需要一些服务器端代码。使用输入类型文件可实现浏览功能。它应该返回一个您可以使用的url。

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

});