Simulate input type = File

Source: Internet
Author: User

The input type = "file" in the form is often used in front-end development, but it is unfortunate that the input type = "file" is not uniform in various browsers, and style is difficult to work;

Usually, my designers are very beautiful. If you really want to restore the design draft, you can only use text boxes and buttons to simulate an input type = "File ".

The HTML code is as follows:

<div class="type-file-box">
<form action="" method="post" name="form1" id="form1">
<input name="fileField" type="file" id="fileField" size="28" />


This is a basic input type = "File ". Of course, you may not see the code of the text box and button here. We can append the text box and button to HTML in the following Js.

Note: size = "28" is the width and height of input type = "file" in Firefox cannot be defined by style, therefore, the size attribute is used to control the width of input type = "File ".

The CSS code is as follows:

.type-file-box {
input {
.type-file-text {
    border:1px solid #cdcdcd;
.type-file-button {
    border:1px solid #CDCDCD;
.type-file-file {
    opacity: 0;

Note: here, the filter: alpha (opacity: 0); opacity: 0 indicates that
Type = "file" is completely transparent, so that the user cannot see the input
Type = "file ". The level is above the text box and button. In this way, when you click the button, the input type = "file" is actually clicked. js code:
$ (Function (){
VaR textbutton = "<input type = 'text' name = 'textfield 'id = 'textfield 'class = 'Type-file-text'/> & nbsp; <input type = 'submit 'name = 'button 'id = 'button 'value = 'browse... 'class = 'Type-file-click'/>"
$ (Textbutton). insertbefore ("# filefield ");
$ ("# Filefield"). Change (function (){
$ ("# Textfield"). Val ($ ("# filefield"). Val ());););
Here we use the JQ when the input type = "file" value onchange when the value of the text box is set to input type = "file" value, OK the demo Demo:

Statement: This article uses BY-NC-SA protocol for authorization | Web Front-end development
Reprinted, please refer to "simulate input type = file"


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.