When obtaining a file in input = file mode, you cannot trigger the change event of input = file indirectly through a button click event in IE 8.

Recently, many upload problems have been encountered in the project. For internal components of the company to upload via form, you need to use input = file to trigger file selection,

Because input = file displays different styles in different browsers, Google, Firefox, and IE are different and not very beautiful

This problem occurs when the hidden input = file is used at the beginning, and then a display button is used to indirectly trigger the click event of input = file as follows:

<Input type = "file" id = "Upload" style = "display: none">

<Input type = "button" value = "Upload" onlick = "document. getelementbyid ('upload'). Click ()"/>

It has been tested that ie9 +, Google, and Firefox can be used normally and uploaded normally, but there is a problem in IE8, no matter how you choose

Cannot trigger the change event. After query, the original security restriction is based on, IE8 will indirectly trigger the input = file value, which leads

The change event cannot be triggered at all times. Then, after some time, Baidu finally developed a compatible thing:

<Div> <input type = 'file'> <A> upload </a> </div>

First, put the input = file side in a DIV, div sets position, and overflow = hidden, and make the input = File Size and Width sufficient to overwrite

The entire Div, at the same time make its transparency opacity 0, so that it can display the overwritten a mark upload, but the actual click is to overwrite the top input = file tag

This solves the compatibility issue.

There is also a small compatibility issue during the upload. It seems that in IE, for example, IE8, input = file is read-only. To clear input = file, after each upload is complete

You must manually clear the node, that is, clone the node first, and then replace the original node ..

Insufficient: However, there is still a problem in doing so. When the Google mouse moves the input = file tag, the mouse and hand type does not work, which leads to poor user experience, there is no solution yet.

The component is based on form upload, And the progress bar is not implemented. To ensure compatibility, HTML5 cannot be used. Therefore, I tried to upload the component in flash, and the result was a fiasco... Poor strength. Learn more.

 

When obtaining a file in input = file mode, you cannot trigger the change event of input = file indirectly through a button click event in IE 8.