Html5 Input Type File's Multiple Attribute Not Working in Ie

HTML INPUT TYPE FILE MULTIPLE NOT WORKING IN IE

<input type="file" name="file" multiple/>

The multiple attribute is new in HTML5 (Reference)

Here is a reference for multiple

Versions supporting `multiple` attribute

Chrome    Edge   Firefox   Opera   Safari
6.0       10.0   3.6       11.0    5.0

Why it doesn't work with Internet Explorer ?

Uploading multiple files is a specific part of HTML5 that none of the Internet Explorers support. Here is a reference to it. Though , IE 10.0 has started supporting it.

---

I found some related resources here and here

---

According to all above statistics , I might like to suggest you to read the second post of this which uses certain alternatives of multiple attribute :

If you can't or don't want to use multiple INPUT TYPE=FILE controls, you must use Flash or Silverlight or a custom ActiveX control

HTML5 input type file's multiple attribute not working in IE?

IE8 does not support HTML5. Perhaps IE9 is running in compatibility mode? Press F12 to bring up the developer tools and in the top menu you can change the settings in what mode it is in.

Maybe it is a solution to use a Java or Flash based system for multiple uploads. Also, these will also usually support drag and drop of files.

how would I detect if multiple attribute is supported for file input elements?

var inp = document.createElement("input");
inp.setAttribute("multiple", "true");
var supportsMultiple = inp.multiple===true;

How to select multiple files with input type=file?

New answer:

In HTML5 you can add the multiple attribute to select more than 1 file.

<input type="file" name="filefield" multiple="multiple">

---

Old answer:

You can only select 1 file per <input type="file" />. If you want to
send multiple files you will have to use multiple input tags or use
Flash or Silverlight.

input type=file positioning issues in IE11 browser

For IE11 you just need to define your CSS width and height of your #upload-file-container input CSS rule

http://codepen.io/jonathan/pen/LGEJQg/?editors=110

Open the above link in IE11 and you will see the browse file input trigger

#upload-file-container input {
    width:100%;
    height:100%;
}

So your CSS rule altogether looks like this:

#upload-file-container input {
    position: absolute;
    top: 0; right: 0; margin: 0;
    border: solid transparent;
    border-width: 0 0 100px 200px;
    opacity: 0.0;
    filter: alpha(opacity=0);
    -o-transform: translate(250px, -50px) scale(1);
    -moz-transform: translate(-300px, 0) scale(4); 
    direction: ltr;
    cursor: pointer;

    width:100%; /* add width */
    height:100%; /* add height */
}

There is really no need to use a CSS transform scale() or transform translate() on your #upload-file-container input element, if you need to make it fit or be bigger.

All you would need to set is a width and height of the element. Especially for IE11 since it requires a width and height since they are not being inherited by their parent elements.

---

Related Topics