Javascript 使用 jquery 动态添加文件输入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4843150/
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
Adding file inputs dynamically with jquery?
提问by Banshee
To make my weppage as compatible as possible I will go with the regular file input, the problem is that I need to offer multiple uploads.
为了使我的网页尽可能兼容，我将使用常规文件输入，问题是我需要提供多次上传。
My thought is that when the first input is set a second will be shown (up to a max of 10). Say that we have filled 5 and there is 6 visible. We now clear the second input, this will result in two empty inputs so then the last(6(empty)) input should be hidden.
我的想法是，当设置第一个输入时，将显示第二个输入（最多 10 个）。假设我们已经填充了 5 个，并且有 6 个可见。我们现在清除第二个输入，这将导致两个空输入，因此应该隐藏最后一个（6（空））输入。
Is this possible to to with Jquery?
这可以与 Jquery 一起使用吗？
Edit1: This is what I manage to create, it works fine. I am however sure that someone that know jquery better could make a smarter script:
Edit1：这是我设法创建的，它工作正常。但是，我确信更了解 jquery 的人可以制作更智能的脚本：
In the view:
在视图中：
<div id="fileInput0" class="fileVisible">
<input type="file" id="file0" name="files" />
<input type="button" value="T?m" onclick="resetFileField(0)" />
</div>
<div id="fileInput1" class="fileHidden">
<input type="file" id="file1" name="files" />
<input type="button" value="T?m" onclick="resetFileField(1)" />
</div>
<div id="fileInput2" class="fileHidden">
<input type="file" id="file2" name="files" />
<input type="button" value="T?m" onclick="resetFileField(2)" />
</div>
<div id="fileInput3" class="fileHidden">
<input type="file" id="file3" name="files" />
<input type="button" value="T?m" onclick="resetFileField(3)" />
</div>
<div id="fileInput4" class="fileHidden">
<input type="file" id="file4" name="files" />
<input type="button" value="T?m" onclick="resetFileField(4)" />
</div>
<div id="fileInput5" class="fileHidden">
<input type="file" id="file5" name="files" />
<input type="button" value="T?m" onclick="resetFileField(5)" />
</div>
<div id="fileInput6" class="fileHidden">
<input type="file" id="file6" name="files" />
<input type="button" value="T?m" onclick="resetFileField(6)" />
</div>
<div id="fileInput7" class="fileHidden">
<input type="file" id="file7" name="files" />
<input type="button" value="T?m" onclick="resetFileField(7)" />
</div>
<div id="fileInput8" class="fileHidden">
<input type="file" id="file8" name="files" />
<input type="button" value="T?m" onclick="resetFileField(8)" />
</div>
<div id="fileInput9" class="fileHidden">
<input type="file" id="file9" name="files" />
<input type="button" value="T?m" onclick="resetFileField(9)" />
</div>
The Script:
剧本：
function fileChangeHandler() {
var hiddenClass = 'fileHidden';
var visibleClass = 'fileVisible';
var parentDiv = $(this).parent;
var idNr = $(this).attr('id').replace('file', '');
idNr++;
if($(this).val().length > 0){
for(var i = idNr; i < 10; i++){
if($('#fileInput' + i).hasClass(visibleClass)){
if($('#file' + i).val().length < 1){ return;}
}
else{
$('#fileInput' + i).attr('class' , visibleClass);
return;
}
}
}
}
function resetFileField(id) {
var hiddenClass = 'fileHidden';
var visibleClass = 'fileVisible';
var counter;
$('#fileInput'+id).html($('#fileInput'+id).html());
$('#file'+id).change(fileChangeHandler);
for(var i = 9; i > -1 ;i--)
{
if(id != i)
{
if($('#fileInput' + i).hasClass(visibleClass)){
if($('#file' + i).val().length < 1){
$('#fileInput' + i).attr('class', hiddenClass);
}
}
}
}
}
What is a better solution?
什么是更好的解决方案？
回答by Darin Dimitrov
You could have a container div which will harbor the new file input fields and a button to add new inputs:
您可以拥有一个包含新文件输入字段的容器 div 和一个用于添加新输入的按钮：
$('#addFile').click(function() {
// when the add file button is clicked append
// a new <input type="file" name="someName" />
// to a filesContainer div
$('#filesContainer').append(
$('<input/>').attr('type', 'file').attr('name', 'someName')
);
});
回答by T.J. Crowder
Yes, you can just add a file input to the form as you would any other element:
是的，您可以像添加任何其他元素一样向表单添加文件输入：
$("#theForm").append("<input type='file' name='foo'>");
$("#theForm").append("<input type='file' name='foo'>");
I thoughtthis sounded familiar: [jquery]How do I add file uploads dynamically?
我觉得这听起来很熟悉：[jquery]如何动态添加文件上传？
回答by jade290
Another option, since you are using JQuery is the Bootstrap fileInput. It lets you upload multiple images with one control. You have additional options too like the allowed file types, size, height, width, etc.
另一种选择，因为您使用的是 JQuery 是Bootstrap fileInput。它允许您使用一个控件上传多张图像。您还有其他选项，例如允许的文件类型、大小、高度、宽度等。
<script type="text/javascript">
$("#postedImage").fileinput({
uploadUrl: "/SomeUrl", // you must set this for ajax uploads
maxFileCount: 10,
enctype: "multipart/form-data",
overwriteInitial: false
});
</script>
<input id="postedImage" type="file" class="file" multiple>
Hereis a link for other uploaders if you are interested.
如果您有兴趣，这里是其他上传者的链接。
回答by Nima shayesteh
if you want to have diffrent input names
如果你想有不同的输入名称
var i;
$('#addFile').click(function() {
i=i+1;
$('#filesContainer').append(
$('<input/>').attr('type', 'file').attr('name', 'file'+i)
);
});
