Question

我是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>

和这个addField（）函数

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

但是，如果我运行此代码，则在第一个字段之后插入第三个输入字段，而不是在最后一个字段之后插入。是否可以在最后一个文件输入后添加输入字段而不使用这些输入的唯一ID？ http://jsfiddle.net/aHrTd/

感谢您的帮助。

Answer 1

这个怎么样 - （在表单中找到最后input:file并在其后插入新输入）

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

Answer 2

这是一个解决方案：http://jsfiddle.net/aHrTd/4/

在pXL建议的最后一次文件输入后，为新文件输入和插入添加唯一的名称和ID。

请注意，我使用了一个利用率最低的jQuery功能，虽然很容易找到（http://api.jquery.com/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>

Answer 3

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

Answer 4

您可以使用.last()

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" class='dynamic-file' /><br />
<input type="submit" name="Odeslat" value="Odeslat soubor" />

JS

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

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

4 个答案:

HTML

JS