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

使用而不是 html() append()方法，这会将数据绑定(bind)到以前的元素作为文件:

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