javascript 自定义 <input type="file"> 在 IE 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25991907/
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
Custom <input type="file"> not working in IE
提问by Fergoso
I'm trying to use a custom < input type="file" > button. This works in chrome and FF. How do I make it work in IE 10 and above?
我正在尝试使用自定义 < input type="file" > 按钮。这适用于 chrome 和 FF。我如何使它在 IE 10 及更高版本中工作？
The problem in IE is that the browse box is not opening.
IE 中的问题是浏览框没有打开。
html:
html：
<button type="button" id="fileT"><input type="file" id="file"></button>
css:
css：
#fileT{
overflow: hidden;
position: relative;
}
#fileT input {
position: absolute;
opacity: 0.1
}
回答by Andrea Ligios
I've got what you mean: since <input type="file"/>is hard to style, you need a container.
Then try using a <div>instead of a <button>.
我明白你的意思：因为<input type="file"/>很难设计，你需要一个容器。然后尝试使用 a<div>而不是 a <button>。
Just ensure you specify height and width since the div content will be absolutely positioned (and hence stripped from the flow).
只需确保您指定高度和宽度，因为 div 内容将被绝对定位（因此从流程中剥离）。
运行演示：
<div id="fileT">
<input type="file" id="file" />
</div>
#fileT{
overflow: hidden;
position: relative;
width: 75px;
height: 50px;
}
#fileT input {
position: absolute;
opacity: 0.5;
}
回答by Kirubanandan Kanagaraj
I think this approach is wrong. The input field <input type="file">should not include inside the <button>.
我认为这种方法是错误的。输入字段<input type="file">不应包含在<button>.
This will work.
这将起作用。
<input type="file" id="file">
回答by V2Solutions - MS Team
Try this way:-
试试这个方法：-
<input type="file" id="file" multiple="true"/>
<button type="button" id="fileT">Upload</button>
OR
或者
It might be version problem.
可能是版本问题。
Updated1:-
更新 1:-
This is bug from IE 10 Desktop.To be more specific here's the IE 10 Desktop version:
这是 IE 10 桌面版的错误。更具体地说，这里是 IE 10 桌面版：
Version: 10.0.9200.16540
Update Versions: 10.0.4 (KB2817183)
Product ID: 00150-20000-00003-AA459
Updated2:-Html:
更新 2:-Html:
<div id="wrapper">
<div id="button">Upload</div>
<input type="file" id="file" multiple="true"/>
</div>
<div id="notice">Nothing to upload</div>
Css:
css：
#button
{
width: 100px;
height: 50px;
background-color: #0f0;
}
#wrapper
{
width: 200px;
height: 50px;
overflow: hidden;
cursor: pointer;
}
回答by V2Solutions - MS Team
You do not need to surround the input tags with button tags, as the input for file upload automatically creates a browse button for you. When you click it in IE you are just clicking the empty button and not the browse one created by the input which is why it is not doing anything. So instead of:
您不需要用按钮标签包围输入标签，因为文件上传的输入会自动为您创建一个浏览按钮。当您在 IE 中单击它时，您只是单击了空按钮，而不是由输入创建的浏览按钮，这就是它没有执行任何操作的原因。所以而不是：
<button type="button" id="fileT"><input type="file" id="file"></button>
Replace simply with:
简单地替换为：
<input type="file" id="fileT">
回答by Janandojan
var input = document.getElementById('Selectfile');
if (!input) {
input = document.createElement('input');
input.type = 'file';
input.id = "Selectfile";
document.body.appendChild(input);
}
input.onchange = function (e) {
var file = e.target.files[0];
};
input.click();
回答by Guruprasad Rao
Just remove that button and try with just input tag.. It works..
只需删除该按钮并尝试仅输入标签..它的工作原理..
Like this
像这样
<input type="file" id="file" value="Browse"/>
if you want to have your custom button then you have to remove position:absoluteand keep opacity:0
如果您想拥有自定义按钮，则必须删除position:absolute并保留opacity:0
