风俗<input type=“file”>不能在 IE 中工作

Question

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?

The problem in IE is that the browse box is not opening.

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

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> .

Just ensure you specify height and width since the div content will be absolutely positioned (and hence stripped from the flow).

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

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:absolute and keep opacity:0

Answer 3

I think this approach is wrong. The input field <input type="file"> should not include inside the <button> .

This will work.

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

Answer 4

Try this way:-

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

OR

It might be version problem.

Updated1:-

This is bug from IE 10 Desktop.To be more specific here's the IE 10 Desktop version:

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

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:

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

Replace simply with:

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