4

我对 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/

谢谢你的帮助。

4

4 回答 4

8

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

function addField(){
  $('form input:file').last().after($('<input type="file" name="files[]" class="file" /><br />'));
}
于 2013-06-19T21:25:40.700 回答
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>
于 2013-06-20T00:04:53.163 回答
0

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

于 2013-06-19T21:24:00.043 回答
0

您可以使用.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());
};
于 2013-06-19T21:25:23.807 回答