Cross-browser Custom File Input Plugin For jQuery

Cross-browser Custom File Input Plugin For jQuery

A lightweight and cross-browser jQuery custom file input plugin which replaces the default file input field with custom styles and file select button.

1. Add jQuery JavaScript library and the jQuery customFileInput.js to the web page.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="js/customfileinput.js"></script>

2. Call the function customFileinput on your HTML form which has file input field(s) as follows:

<form class="customfileinput">
  <dl class="qiocform">
    <dd> <span>Name</span>
      <label class="textfield">
        <input type="text" name="name">
      </label>
    </dd>
    <dd> <span>Email Address:</span>
      <label class="textfield">
        <input type="text" name="email">
      </label>
    </dd>
    <dd> <span>Phone Number :</span>
      <label class="textfield">
        <input type="text" name="phone">
      </label>
    </dd>
    <dd> <span>Upload Your Document :</span>
      <label>
        <input type="file" />
      </label>
    </dd>
    <dd> <span>Upload Your Another Document:</span>
      <label>
        <input type="file" />
      </label>
    </dd>
    <dd class="invisible"> <span>Invisible Object:</span>
      <label>
        <input type="file" />
      </label>
    </dd>
    <dd> <span>Comment :</span>
      <label class="textfield">
        <textarea name="massage" cols="5" rows="5"></textarea>
      </label>
    </dd>
    <dd class="submit clearfix">
      <input type="submit" value="Submit" name="submit">
    </dd>
  </dl>
</form>
$('.customfileinput').customFileinput();

3. Apply you own CSS styles to the file input.

.customfile {
  position: relative;
  overflow: hidden;
  width: 230px;
  height: 26px;
  border: solid 0px red;
  background: #fff;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: solid 1px #c2c2c2;
  padding: 2px;
  -webkit-box-shadow: inset 1px 1px 2px #e4e4e4;
  box-shadow: inset 1px 1px 2px #e4e4e4;
}
.customfile span {
  display: block;
  float: left;
}
.customfile span.cust-field {
  line-height: 20px;
  padding: 3px 4px;
  width: 151px;
  height: 20px;
  cursor: pointer;
  color: #212121;
  display: block;
  font-weight: normal;
  color: #333;
}
.customfile span.cust-btn {
  float: right;
  line-height: 20px;
  padding: 1px 10px;
  height: 22px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  color: #333;
  background: #e1e1e1;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  text-transform: uppercase;
  margin-top: 1px;
}
.customfile .fileinput {
  position: absolute;
  left: 0px;
  top: 0px;
  cursor: pointer;
  z-index: 99;
}

4. Plugin's default options to customize the file input.

$('.customfileinput').customFileinput({
  // button text
  buttontext : 'Send',
  // max width
  customboxwidth : '98%',
  // default CSS classes
  customboxclass : 'customfile',
  fileinputclass : 'fileinput'
  
});

This awesome jQuery plugin is developed by bharatdangar. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 17.02.2018
  • Source