javascript 使用 jQuery 将文件输入添加到表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17201488/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add file input to form using jQuery
提问by Jakolcz
I'm pretty new to jQuery and I'm trying to make simple HTML upload page and I want to add new file input to form after selecting some file. I've tried this code
我对 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>
and this addField() function
这个 addField() 函数
function addField(){
$('<input type="file" name="files[]" id="file" /><br />').insertAfter('#file');
};
But if I run this code, the 3rd input field is inserted after the 1st one instead of after the last field. Is it possible to add input fields after the last file input without using unique ids for these inputs? http://jsfiddle.net/aHrTd/
但是，如果我运行此代码，第三个输入字段将插入第一个输入字段之后而不是最后一个字段之后。是否可以在最后一个文件输入之后添加输入字段而不使用这些输入的唯一 ID？http://jsfiddle.net/aHrTd/
Thanks for any help.
谢谢你的帮助。
回答by Mohammad Adil
How about this - (find last input:filein form and insert new input after it)
这个怎么样 - （在表单中找到最后一个input:file并在它后面插入新的输入）
function addField(){
$('form input:file').last().after($('<input type="file" name="files[]" class="file" /><br />'));
}
回答by Robert Waddell
Here is a solution: http://jsfiddle.net/aHrTd/4/
这是一个解决方案：http: //jsfiddle.net/aHrTd/4/
Adds a unique name and id to the new file inputs and inserts after last file input as pXL has suggested.
按照 pXL 的建议，将唯一名称和 ID 添加到新文件输入并在最后一个文件输入之后插入。
Note that I have used one of the most under-utilized jQuery abilities, though it easy to find (http://api.jquery.com/jQuery/) can build a new element for you in a nice clean way.
请注意，我使用了最未被充分利用的 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>
回答by bluetoft
Your inputs have to have unique ids. Give them a unique id and it should work fine.
您的输入必须具有唯一的 ID。给他们一个唯一的 id，它应该可以正常工作。
回答by Patrick
You can use .last()
你可以使用.last()
HTML
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
JS
function addField(){
$('<input type="file" name="files[]" class="dynamic-file" /><br />').insertAfter($('.dynamic-file').last());
};
