javascript - 当我添加另一个文件输入字段时，选定的文件被删除

Question

我有一个表单，可以根据用户需要添加新的文件输入字段。我用 div 包围输入，如下所示:

<div id="fileinputs">
    <div class="myinput">
        <label for="PropertyPic01">Photos</label>
        <input type="file" name="data[Property][pic01]" id="PropertyPic01">
    </div>
</div>

我的 jQuery 代码执行以下操作:

//Add Pic link
$('#addPic').click(function(e)
{
    if(!window.fotoCtr)
    {
        window.fotoCtr = 2;
    } else
    {
        window.fotoCtr++;
    }

    if(window.fotoCtr == 5)
    {
        $('#addPic').html('');
    }

    e.preventDefault();
    $('div#fileinputs').html($('div#fileinputs').html() + 
        '<div class="input file">' +
        '<input type="file" name="data[Property][pic0' + window.fotoCtr + ']" id="PropertyPic0' + window.fotoCtr + '">' +
        '</div><br/>'
        );
})

我遇到的问题是，像上面那样添加另一个文件输入字段会导致从其他输入中删除选定的文件。有办法解决这个问题吗？

Answer 1

使用 append() 方法代替 html()，这会将数据作为文件绑定(bind)到先前的元素:

$('div#fileinputs').append(
        '<div class="input file">' +
        '<input type="file" name="data[Property][pic0' + window.fotoCtr + ']" id="PropertyPic0' + window.fotoCtr + '">' +
        '</div><br/>');