unknown os platform
Custom file chooser / upload / input with HTML and CSS | Whats-online.info

Custom file chooser / upload / input with HTML and CSS

2016:08:21 / Science and Tutorials

How to create custom file chooser with CSS and HTML. Preview the file on Input file change with Jquery before uploading it to the server.

Congratulations! You have found the best destination to customize your site file chooser with CSS and HTML.These article covers how to create a custom file chooser with CSS and HTML. Besides, Preview the file selected for upload using Jquery as shown below.

Image 1.
Custom file chooser

image 2.
Preview the image file on chooser change.

Advantages of customizing a Form file chooser.

1. It improves the interaction between the site and the visitors.
Site visitors enjoy when they can preview what they are uploading to the server.
2. File choosers that show the file preview and upload progress install the fruit of patience to the site visitors.

Note that, Flexibility of a website is determined by its' responsiveness,  forms and divs outlay, page navigation, color blending, text, and line spacing. Look at the case of google and facebook. People familiarize with the sites' interface the first time after signing up. 
That is, they can navigate from page to page, quickly upload photos and much more.

Before beginning creating a site with forms, ask yourself the following rhetorical questions.
How can one customize a form file chooser to fit the look and feel of the site?
What requirements are needed to capture the interests of the site visitors and maintain them on the site?
The answers are already here.

This article covers step by step how you can create a custom file upload with CSS and HTML. Besides, there is a clear demonstration about the same which you can download and run it on your localhost.
We will customize our file chooser to have a custom image background and which opens the files on the local disk on click.
Also, I will show how to use Jquery for previewing the file on file chooser change before submitting it to the server.

In brief, I will create three files. HTML file to handle the form and its elements, CSS file to layout the form elements and JS to handle the file previewing before uploading it to the server.

First and foremost we will create index.html to handle our form as shown below. 

In case you are a beginner, an HTML form is used to collect inputs, and it contains elements such as file inputs, radio buttons, checkboxes and much more.

Our index.html
Contains form and its elements

<html> <head> <title>Custom file chooser/upload/input with HTML and CSS</title> </head> <body> <h1>Custom file chooser/upload/input with HTML and CSS</h1> <form action="" id="formContent" method="post" enctype="multipart/form-data" > <div id="uploadFile"> <label for="upload" title="Upload photo"  class="camera"></label> <label for="upload" ><img  id="imageReader"></label> <input  type="file" name="file"  required id="upload"> </div> <div id="type"></div> </form> <br><br><a target="_blank" href="http://whats-online.info/"><div id="website">Visit website</div></a> <script src="jquery-1.10.2.js"></script> <script src="upload.js"></script> </body> </html>

Contains the code for laying out our custom file chooser

body{ width:100%; } h1{ text-align:center; background:#f0f0f0; border:1px solid black; } #uploadFile{ width:200px; margin:auto; height:auto; padding:10px; border:10px solid #f0f0f0; text-align:center; } .camera{ background:url('prof_upload.jpg');     height:150px; width:150px; display:block; cursor:pointer; } input[type="file"]{ display:block; width:150px; height:150px; display:none; } .submitI{ padding:5px 10px 5px 10px; background:#0000ff; color:white; width:120px; margin:auto; cursor:pointer; } #website{ padding:5px 10px 5px 10px; background:#ff0000; color:white; width:120px; margin:auto; text-decoration:none; cursor:pointer; } #imageReader{ max-height:150px; max-width:150px; }

Our upload.js
Contains the function for previewing the file before uploading it to the server

$(document).ready(function(){ $("#upload").change(function(){ var file=this.files[0];          var imageFile=file.type;          var match=["image/jpeg","image/png","image/jpg"];     if(!((imageFile==match[0]) || (imageFile==match[1]) || (imageFile==match[2]))){ $("#type").text("Only Jpeg/ Jpg /Png /Gif are allowed"); return false; }else{ $("#type").hide(); //alert("required"); var reader=new FileReader(); reader.onload=imageIsLoaded; reader.readAsDataURL(this.files[0]);   } }); function imageIsLoaded(e){  $("#imageReader").attr('src', e.target.result);  $(".camera").hide();  $("#imgRead").show(); } });

Custom file choosers are useful for improving the user-site interaction and maintaining them on the site.

You may also like:

Leave a comment

Subscribe to get replies direct to your mailbox

Submit comment