File Upload

In this example below you will see how to do a File Upload with some HTML / CSS and Javascript

Custom file upload button, Javascript used only to display filename.

This awesome code was written by 416studios, you can see more from this user in the personal repository.
You can find the original code on
Copyright 416studios ©


  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>File Upload</title>
      <link rel="stylesheet" href="css/style.css">



<form method="post" enctype="multipart/form-data" action="">
  <span id="filename">Select your file</span>
    <label for="file-upload">Browse<input type="file" id="file-upload"></label>
  <script src=''></script>


    <script  src="js/index.js"></script>



/*Downloaded from */
@import url("");
body {
  background: #9b59b6;
  color: #ecf0f1;
  font-family: lato,sans-serif;
  text-align: center;
  margin: 10% auto;
  display: table;

form {
  text-align: left;

#file-upload {
  position: absolute;
  left: -9999px;

label[for="file-upload"] {
  padding: 0.5em;
  display: inline-block;
  background: #623475;
  cursor: pointer;
label[for="file-upload"]:hover {
  background: #6b3880;

#filename {
  padding: 0.5em;
  float: left;
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  background: #804399;

/*Downloaded from */
$('#file-upload').change(function() {
    var filepath = this.value;
    var m = filepath.match(/([^\/\\]+)$/);
    var filename = m[1];