Shulou(Shulou.com)06/03 Report--

This article will explain in detail the browser solution for input file upload file style to support html5. The content of the article is of high quality, so the editor will share it with you for reference. I hope you will have some understanding of the relevant knowledge after reading this article.

Recently, the file upload control was used when using the canvas to process image pixels, and two compatibility issues of the file upload control were found. One is that the file upload control cannot change width through css under Firefox, and the other is that the file upload control looks and behaves differently in different browsers.

In IE10, double-click the input box or click the button to pop 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 confusion, it is necessary to unify style and behavior. Here is my compatibility plan.

First, take a look at the screenshots of the final result in each browser:

Basic idea: create input boxes and buttons to simulate file upload controls. Set the file upload control to transparent. Align the file upload control to the right of the button used for simulation. Change the stacking order of the elements so that the button is below, the file upload control is in the middle, and the input box is above. After the file is selected, assign the value in the file upload control to the input box for simulation.

Principle: in different browsers, the height of the button of the file upload control is adjustable, and the right side of the file upload control is clickable. So by adjusting the height of the file upload control, and adjusting the position of the file upload control (right alignment), you can make the clickable area of the file upload control completely covered with the button for simulation. The file selection box is triggered when the user clicks the button for simulation when the file upload control is transparent. But at the same time, the stacking order of the file upload controls cannot precede the input box used for simulation, otherwise the user may be confused when he hovers the mouse over the input box that he sees and sees that the cursor is not an arrow but an arrow (and clicking on an arrow will pop up a file selection box).

Implementation: first look at the code in the html section.

The code is as follows:

Then there is the code for the css part.

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

}

Finally, the javascript part is used to display the file path obtained by the file upload control into the 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

}

}

On the input file upload file style to support html5 browser solutions to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.