Javascript 使用jQuery将文件输入添加到表单

我对jQuery非常陌生，我正在尝试创建简单的HTML上传页面，我想在选择一些文件后向表单添加新的文件输入。我试过这个密码

<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data" onchange="addField();">
<label for="file">Soubor:</label>
<input type="file" name="files[]" id="file" /><br />
<input type="submit" name="Odeslat" value="Odeslat soubor" />
</form></body>
<script>
$('#upload').delegate('input[type=file]', 'change', function(){
  alert('Alert');
  addField();
});
</script>

苏博尔：


$（'#upload'）.delegate（'input[type=file]，'change'，function（）{
警报（“警报”）；
addField（）；
});

这个addField（）函数

函数addField（）{
$（“
”）.insertAfter（“#文件”）；
};

但是如果我运行这段代码，第三个输入字段将插入到第一个字段之后，而不是最后一个字段之后。是否可以在最后一次文件输入之后添加输入字段，而不使用这些输入的唯一ID

---

谢谢您的帮助。

您的输入必须具有唯一的ID。给他们一个唯一的id，它应该可以正常工作。

您可以使用

HTML

苏博尔：

JS

函数addField（）{
$（'
'）.insertAfter（$（'.dynamic file'）.last（）；
};

这个怎么样？（在表单中查找最后一个

输入：文件

，并在其后面插入新的输入）

函数addField（）{
$（'form input:file'）.last（）之后（$（'
'）；
}

这里有一个解决方案：

按照pXL的建议，向新文件输入添加唯一的名称和id，并在最后一次文件输入后插入

请注意，我使用了最未充分利用的jQuery功能之一，尽管很容易找到（）可以以一种非常干净的方式为您构建新元素

<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data" onchange="addField();">
<label for="file">Soubor:</label>
<input type="file" name="files" id="file" /><br />
<input type="submit" name="Odeslat" value="Odeslat soubor" />
</form>

<script>
function addField(){
    var lastfile = $('form input:file').last();
    var countfile = ($('form input:file').length)+1;
    $( "<input/>", {
        "type": "file",
        "name": "file_"+countfile,
        "id": "file_"+countfile
    }).insertAfter(lastfile);
    fileinputmonitor();
}

function fileinputmonitor(){
    $('input[type="file"]').change(function(){
        alert('Alert');
        addField();
    });
}

fileinputmonitor();
</script>

苏博尔：


函数addField（）{
var lastfile=$（'form input:file'）.last（）；
var countfile=（$（'form input:file'）.length）+1；
$( "", {
“类型”：“文件”，
“名称”：“文件”+计数文件，
“id”：“文件”+计数文件
}).insertAfter（最后一个文件）；
fileinputmonitor（）；
}
函数fileinputmonitor（）{
$（'input[type=“file”]”）。更改（函数（）{
警报（“警报”）；
addField（）；
});
}
fileinputmonitor（）；

您正在创建具有相同ID的多个元素

文件

。ID必须是唯一的。很好，但是它是不是放错了位置，把它放在
开头像

<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data" onchange="addField();">
<label for="file">Soubor:</label>
<input type="file" name="files[]" id="file" class='dynamic-file' /><br />
<input type="submit" name="Odeslat" value="Odeslat soubor" />

function addField(){
  $('<input type="file" name="files[]" class="dynamic-file" /><br />').insertAfter($('.dynamic-file').last());
};

function addField(){
  $('form input:file').last().after($('<input type="file" name="files[]" class="file" /><br />'));
}

<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data" onchange="addField();">
<label for="file">Soubor:</label>
<input type="file" name="files" id="file" /><br />
<input type="submit" name="Odeslat" value="Odeslat soubor" />
</form>

<script>
function addField(){
    var lastfile = $('form input:file').last();
    var countfile = ($('form input:file').length)+1;
    $( "<input/>", {
        "type": "file",
        "name": "file_"+countfile,
        "id": "file_"+countfile
    }).insertAfter(lastfile);
    fileinputmonitor();
}

function fileinputmonitor(){
    $('input[type="file"]').change(function(){
        alert('Alert');
        addField();
    });
}

fileinputmonitor();
</script>