使用jQuery向表单添加文件输入

Add file input to form using jQuery

本文关键字：文件 输入 添加 表单 jQuery 使用      更新时间：2023-09-26

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

谢谢你的帮助

这个怎么样- (找到最后一个input:file在表单中并在它后面插入新的输入)

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

解决方案:http://jsfiddle.net/aHrTd/4/

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

请注意，我使用了最未充分利用的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>

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

可以使用。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());
};
相关文章：