HTML5 is quickly becoming a standard for developing dynamic and highly functional websites. HTML5 is a leading markup language these days because it’s compatible with all the major browsers. Owing to its compatibility, developers find it as a means of creating web projects that help them raise there website standards. Nowadays, there are number of websites leverage the benefits provided by JavaScript and HTML5 to quickly and easily upload files, without having to use POST requests or reload the page.

JavaScript is dynamic enough to upload all your files with an absolute ease and using HTML5 means there are better chances of file validations. Users now have more ways to select the files they wish to upload and reject. This is something which reduces the chances of making errors that was quite frequent before the advent of these technologies.

JavaScript provides us a more reliable ways to avoid code repetitions with the help of Ajax requests. A nice added feature of Ajax is its ability to handle file uploads. With Ajax, as soon as you hit the submit, a request is sent to the server by JavaScript, which interpret the results, and update the web page. The introduction of Ajax has truly revolutionized the way how applications are built and rendered.

What Do We Mean By HTML5 File Uploads?

Uploading files using HTML5 is done by combining three leading technologies- the all new File Reader API, the new Drag and Drop API, and the Ajax. Below is a brief description about HTML5 file uploading process.

  • The user drag and drop one or more files from their system to the browser window. Browser that provides support for Drag & Drop API, triggers an event, accompanied by some other relevant piece of information, along with the list of all the files that you’ve recently dropped.
  • We will read all the files by using the File Reader API. The listed files will be read as binary data and save in the memory.
  • Now, we use the sendAsBinary data function of the XMLhttpRequest, and will move the data directly to the server.

In this tutorial, you’ll learn the process of uploading files to the server using JavaScript technologies. So, let’s get started!

1. The first thing you need to do is simply set up your HTML form that will allow the user to select the files they want to upload. To keep things comprehensive, we are using a standard <input>   element along with the ‘file’ type.

<form method="post" id="form" enctype="multipart/form-data">  
<input type="file" name="file" id="file" /><br>
<input type="submit" value="Upload" />  
</form> 
<div class="msg"></div>

So, we have created our HTML form. Now, once you have your jQuery code, you’ll be able to remove “enctype=”multipart/form-data” to make this form accept multiple files. Until then, this form, will only accept single file and Upload button needs to be created to trigger the function. Next, look at the JavaScript code below that will handle the file upload.

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// On the document ready  
$('#form').submit(function (event) {  
event.preventDefault();  
// On the submit even,  
if($.trim($('#form').find('input[type="file"]').val()) == ''){
$('.msg').text('Please select any file!').show();
return false;
}else{
$('.msg').text('File is being uploaded...').show();
}
var frmData = new FormData($('#form')[0]);
$.ajax({  
type: 'POST',  
processData: false,  
contentType: false,  
data: frmData,  
success: function (data) {  
// The file is uploaded successfully...  
$('.msg').text('File is uploaded.').show();  
},  
error: function (data) {  
// there was an error.  
$('.msg').text('Some error in the request.').show();  
}  
});  
});  
});
</script>

 

CSS

body {
margin: 25px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
input[type="file"] {
border: 1px solid #000;
background: #EEE;
}
input[type="submit"] {
border: 1px solid #000;
background: #333;
margin-top: 10px;
padding: 5px;
border-radius: 5px;
color: #FFF;
}
.msg {
position: fixed;
width: 300px;
padding: 25px 0;
background: #333;
border: 1px solid #DDD;
box-shadow: 0 0 5px #000;
color: #FFF;
text-align: center;
left: 50%;
margin-left: -150px;
top: 20%;
display: none;
}

 

Output:

input
The following code contains an element where different outputs can be provided.

<div class="msg"></div>

 

The element is useful to view all the processes that are going on currently. The process which can be shown to the user are:

  • A message conveying that the file is being uploaded
  • Once the process is completed, a success message will be shown otherwise an error message will be displayed to the user.

using-html5andjquery plugins to upload files-2

Output on Error:

Output on Success:

using-html5andjquery plugins to upload files-1

Overriding the code so that page won’t reload the POST request

There is a simple way to do this. Look at the second line inside the event handler that is event.preventDefault();. In this line, the default behavior that you want to trigger will be overridden. This way the page won’t be able to reload the POST request and will execute only the code of your choice.

To Conclude

HTML5 and Ajax are emerging techniques used by the majority of webmasters to upload files on their website server. The advancement in Ajax functionality has eliminated the need of using third-party plugins to handle file uploads. This is quite reliable because it makes the process faster and more safe as compared to the plugins.

1 COMMENT

  1. Hello, I’d like to know where do I store the uploaded files, and if is there a possibility of restrict file types.
    Thanks.

LEAVE A REPLY

Please enter your comment!
Please enter your name here