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.

Thumbnail
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 Codepen.io
Copyright 416studios ©

Technologies

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

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

  
</head>

<body>

  
<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>
</form>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/416studios/file-upload-owGzj */
@import url("https://fonts.googleapis.com/css?family=Spinnaker");
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 https://www.codeseek.co/416studios/file-upload-owGzj */
$('#file-upload').change(function() {
    var filepath = this.value;
    var m = filepath.match(/([^\/\\]+)$/);
    var filename = m[1];
    $('#filename').html(filename);

});

Comments