Question

我正在尝试使用自定义＆lt; input type =“file”＆gt;按钮。这适用于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" id="file" value="Browse"/>

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

Answer 3

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

这样可行。

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

Answer 4

尝试这种方式： -

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

或

可能是版本问题。

<强> Updated1： -

这是来自IE 10 Desktop的错误。这里更具体的是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 5

您不需要使用按钮标签包围输入标签，因为文件上传的输入会自动为您创建浏览按钮。当您在IE中单击它时，您只是单击空按钮而不是输入创建的浏览，这就是它没有做任何事情的原因。所以而不是：

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

简单地替换为：

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

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

自定义<input type =“file”/>不在IE中工作

6 个答案: