动态创建文件输入的最佳方式
动态创建文件输入的最佳方式
提问于 2019-06-12 14:21:41
我有一些自定义的上传文件选项，如多个超链接。当点击它时，我需要触发隐藏文件输入。比方说，我有10个上传不同图标的超链接。
有两种方法可以做到这点：
当点击相应的hyperlink.
- Create时，
- 创建10个文件输入并隐藏它们，并手动触发它们。当用户点击超链接时，在该函数中，使用javascript创建文件输入并使用js触发它。
所以，我的问题是，哪一个是最好的，或者有一个有效的方法来做到这一点。
回答 2
Stack Overflow用户
发布于 2019-06-12 14:26:34
您可以尝试创建单个input type='file'并像这样使用accept属性来限制by accepted file types
<input type="file" id="profile_pic" name="profile_pic"
accept=".jpg, .jpeg, .png">Stack Overflow用户
发布于 2019-06-12 14:49:02
在javascript中，您可以使用createElement函数来创建输入字段.createElement()，然后使用.appendChild()将这些元素附加到您需要的任何位置。
因此，您可以创建一个函数来创建适当的输入域：
function appendInput(inputType){
if(inputType==1){
var input = document.createElement("input");
input.setAttribute('type', 'file');
$('body').appendChild(input);//just replace body with whatever element you want to append the input to e.g $('#someDivId').appendChild(input);
}else if(inputType==2){
//some other input
}/...
}但是，如果您只是尝试输入不同类型的文件，brk的答案要高效得多
希望这能有所帮助
从维护的角度来看，编辑也有10个不同的输入字段可供隐藏和显示，因此我建议根据单击的超链接创建不同的输入字段。
EDIT2根据我的理解，您需要每个输入具有不同的名称，因此您只需将该函数更改为：
function(inputName){
var input = document.createElement("input");
input.setAttribute('type', 'file');
input.setAttribute('name', inputName);//pass the name of each input field
$('body').appendChild(input);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56555801
复制相关文章
相似问题
腾讯云开发者
