HTML 5 browser solution for uploading file styles in input file

Comments: I recently used the file Upload control and found two compatibility issues with the file upload control: one is that the file upload control cannot change the width through css in Firefox, the other is that the file upload control has different appearances and behaviors in different browsers. This article provides a detailed solution. Recently, when using the canvas to process image pixels, the file upload control is used, two compatibility issues with the file upload control were found. One is that the file upload control cannot change the width through css in Firefox, and the other is that the file upload control has different appearances and behaviors in different browsers.
The following are the file Upload controls in IE10, firefox16, chrome22, opera12, and safari5.1.7:

 
In IE10, double-click the input box or click the button to bring up the file selection box. Click the input box, button, or text in other browsers to trigger the file selection box.
In view of this chaotic situation, it is necessary to unify the style and behavior. The following is my compatibility plan.
Let's take a look at the final results in various browsers:

Basic Idea: Create an input box and button to simulate the file Upload control. Set the file Upload control to transparent. Align the file Upload control to the right of the button used for simulation. Modify the stacked order of elements, put the buttons below, the file upload control in the middle, and the input box above. After selecting a file, assign the value in the file upload control to the input box used for simulation.
Principle: in different browsers, the height of the buttons of the file upload control is adjustable, and the right side of the file upload control can be clicked. Therefore, by adjusting the height of the file upload control and adjusting the position (right alignment) of the file upload control, you can completely overwrite the clickable area of the file upload control with the simulated button. When the file upload control is transparent, you click the button used for simulation to trigger the file selection box. However, the stacking sequence of the file upload control cannot be prior to the input box used for simulation, otherwise, when you place the mouse over the visible input box, you may see that the cursor is not an indicator text but an arrow (and when you click an arrow, the file selection box will pop up), and you will be confused.
Implementation: first look at the html code.

The Code is as follows:
<Div id = "file">
<Input type = "text" value = "file not selected"/> <input type = "button" value = ""/> <input type = "file"/>
</Div>

Then there is the css code.

The Code is as follows:
# File {
Position: relative;
Width: 226px;
Height: 25px;
Border: 1px # 99f solid;
}
# File input {
Font-size: 16px;
Margin: 0;
Padding: 0;
Position: relative;
Vertical-align: middle;
Outline: none;
}
# File input [type = "text"] {
Border: 3px none;
Width: 172px;
Z-index: 4;
}
# File input [type = "button"] {
Width: 54px;
Height: 25px;
Z-index: 2;
}
# File input [type = "file"] {
Position: absolute;
Right: 0px;
Height: 25px;
Opacity: 0;
Z-index: 3;
}

The last javascript part is used to display the file path obtained by the file upload control to a visible input box.

The Code is as follows:
Window. onload = function (){
Var file = document. querySelector ("# file input [type = 'file']");
Var text = document. querySelector ("# file input [type = 'text']");
File. addEventListener ("change", assign, false );
Function assign (){
Text. value = file. value;
}
}

Please leave a message or correct me.