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

This article mainly explains "how to use the inputtype=file element in the Web page". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn how to use the inputtype=file element in the Web page.

Web pages, when you need to upload files will basically use the inputtype=file element, its default style: chrome: IE: no matter which of the above, the style is relatively simple, and many page styles are not quite compatible. According to the needs of users, the design style, change its display style on more occasions. If you want to do a bootstrap-style upload button as below, how to implement it.

Inputtype=file elements required to build the upload button

The copy code is as follows: spanspan upload / spaninputtype= "file" / span effect (chrome): what you see now is shown in two lines. The reason why the perimeter is not changed to div is that in IE7- browsers, as long as it is not set to inline, its width will be extended to the width it can reach. If set to inline, the width of the element cannot be adjusted, so using span and then setting it to inline-block can solve this problem.

How to use the inputtype=file element

Add style to change two lines into one line

The copy code is as follows: span "span upload / spaninputtype=" file "/ spancss:

The copy code is as follows: .fileinput-button {position:relative;display:inline-block;}. Fileinput-buttoninput {position:absolute;right:0px;top:0px;} effect: there is no light blue border by default, and it will be displayed only after the mouse is clicked. It is shown here for clarity. They are all detached from the document stream by setting the peripheral span to display:relative and input to display:absolute. The original two-line display is changed into one-line display by limiting the input to the peripheral span for absolute positioning. In fact, it is already overflow here, and the real width is the width of uploaded text. Modify the fileinput-button style and add overflow:hidden.

Copy the code code as follows: .fileinput-button {position:relative;display:inline-block;overflow:hidden;} effect: very interesting, you can see the blue border on the right after the top, in fact, it hides the overflow on the left and the bottom. At this time, clicking the word upload with the mouse actually clicks on the input, which can display the open dialog box, because at the display level, input is closer to the user than uploading. Pay attention to the right in input positioning, why not use left positioning.

At this point, I believe you have a deeper understanding of "how to use inputtype=file elements in Web pages". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.