自定义在IE中不起作用

Question

我正在尝试使用自定义的按钮。这适用于chrome和FF。如何使它在IE 10及更高版本中工作？

IE中的问题是浏览框未打开。

html：

<button type="button" id="fileT"><input type="file" id="file"></button>

css：

#fileT{
    overflow: hidden;
    position: relative;
}
#fileT input {
    position: absolute;
    opacity: 0.1
}

Answer 1

我的意思是：由于<input type="file"/>很难样式化，因此需要一个容器。然后尝试使用<div>代替<button>。

只需确保您指定高度和宽度，因为div内容将绝对定位（因此从流中删除）。

Running demo：

<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;
}

Answer 2

我认为这种方法是错误的。输入字段<input type="file">不应包含在<button>内部。

这将起作用。

<input type="file" id="file">

Answer 3

只需删除该按钮，然后尝试使用输入标签即可。。。

喜欢这个

<input type="file" id="file" value="Browse"/>

如果要使用自定义按钮，则必须删除position:absolute并保留opacity:0

Answer 4

您不需要在输入标签周围加上按钮标签，因为用于文件上传的输入会自动为您创建一个浏览按钮。当您在IE中单击它时，您只是单击空按钮，而不是由输入创建的浏览按钮，这就是为什么它不执行任何操作的原因。因此，代替：

<button type="button" id="fileT"><input type="file" id="file"></button>

简单替换为：

<input type="file" id="fileT">

Answer 5

尝试这种方式：-

<input type="file" id="file" multiple="true"/>
    <button type="button" id="fileT">Upload</button>

OR

可能是版本问题。

Updated1：-

这是来自IE 10桌面的错误。更具体地说，这是IE 10桌面版本：

Version: 10.0.9200.16540
Update Versions: 10.0.4 (KB2817183) 
Product ID: 00150-20000-00003-AA459

Refer This

Updated2：-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：

#button
{

    width: 100px;
    height: 50px;
    background-color: #0f0;
}

#wrapper
{
    width: 200px;
    height: 50px;
    overflow: hidden;
    cursor: pointer;
}

Fiddler

Answer 6

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();