Upload image with progress bar using jQuery:

This article will explain how to upload an image with a progress bar using jQuery with various examples. Firstly we know the html file [] field for uploading a file and the understanding of jQuery for the progress bar. The progress bar displays the percentage of files and how many files are uploaded.

Following are examples of uploading an image with a progress bar using jQuery.

Example 1:

<! DOCTYPE html>
<html>
	<head>
		<title> Upload image with progress bar using jQuery
 Example </title>
		<meta charset = "UTF-8" />
	<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1.0 ,user-scalable=no">
<link href = "https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css"> 
<link href = "https://fonts.googleapis.com/css?family=Roboto" rel = "stylesheet"> 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"> </script> 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
</head>
<style>
@import url('https://fonts.googleapis.com/css?family=Catamaran');
body {
  background: hsl(217.6,100%,80%);
  font-family: monospace;
  padding-top: 5em;
  display: flex;
  flex-flow: wrap column;
  justify-content: center;
  align-items: center;
}
h2 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
  font-family: "Lucida Console", "Courier New", monospace;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  text-align: center;
}
h1 { 
  text-align: center;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: "Lucida Console", "Courier New", monospace;
  letter-spacing: -0.005em; 
  word-spacing: 1px;
}
.dropzone {
    background: white;
    border-radius: 5px;
    max-width: 500px;
    margin:50px  auto;
    padding: 0 0;
    height: auto;
    min-height: 50px;
}
.dropzone.dz-clickable {
    cursor: pointer;
    background: #fafafa;
    color: #396E90;
    font-weight: 700;
    letter-spacing: 1px;
    font-family: 'Roboto', sans-serif;
    border:1px solid #cccccc;
    border-radius: 2px;
}
.dropzone .camera-img {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 15px;
    position: absolute;
    left: 0;
}
.dropzone .img-circle { position: relative; display: inline-block; padding-left: 45px; }
.dropzone .camera-img img {
    width: 100%;
    height: 100%;
    display: block;
}
.dropzone .dz-preview .dz-details .dz-filename:hover span {
    border: 1px solid transparent; 
}
.dropzone .dz-message { margin: 15px; }
.dropzone .dz-preview .dz-details .dz-size { display: none; }
.dropzone .dz-preview .dz-details {
    height: 50px;
    min-height: 50px;
    padding:0;
    padding-left: 25px;
    text-align: left;
    display: flex;
    align-items: center;
    opacity: 1;
    justify-content: space-between;
}
.dropzone .dz-preview.image__open .dz-details {
    padding-left: 55px;
}
.dropzone .dz-preview { width: 100%; height: 50px; min-height: 50px; margin: 0; }
.dropzone .dz-preview .dz-progress {
    left: -1px;
    right: -1px;
    margin: 0;
    top: -5px;
    height: 5px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    width: auto;
}
.dropzone .dz-preview .dz-image {
    height: 50px;
    width: 50px;
    border-radius: 0 !important;
    display: none;
}
.dropzone .dz-preview .dz-details .dz-filename { display:flex; }
.dropzone .dz-preview:hover .dz-image img {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
     transform: none; 
     -webkit-filter: none; 
     filter: none; 
}
.dropzone .dz-preview .dz-image img {
     height: 100%;
     width: 100%;
}
.dropzone .dz-preview .dz-progress .dz-upload {
    background: #396E90;   
}
.dropzone .dz-preview .dz-error-message {
    top: auto;
    left: 0;
    background: linear-gradient(to bottom, #ff0000, #ff0000);
    background: #ff0000;
}
.dropzone .dz-preview .dz-error-message:after {
    border-bottom: 6px solid #ff0000;
}
.dropzone .dz-preview .dz-remove {
    color: #396E90;
    text-decoration: none;
    padding: 0 25px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    z-index: 999999;
}
.dropzone .dz-preview .dz-remove:hover {
    text-decoration: none;
}
.dropzone .dz-preview.image__open .dz-image { display: block; }
.dropzone .dz-preview.image__open .uploading { display: none; }
</style>
<body>
<div class = "wrapper">
<h2> Example </h2> 
    <h1> Upload image with progressbar. </h1>
    	<input type = "hidden" name = "resume_file_url" id = "id_resume_file_url">
        <section>
            <div id = "dropzone">
                <form class = "dropzone needsclick demo-upload" action = "/upload">
                    <div class = "dz-message needsclick">
                        <div class = "img-circle"> <i class = "camera-img"> <img src = "images/photo-camera.svg" alt = " "> </i> Add image of slide. </div>
                    </div>
                </form>
            </div>
        </section>
        <div id = "preview-template" style = "display: none;">
            <div class = "dz-preview dz-file-preview">
            	<div class = "dz-image"> <img data-dz-thumbnail = " "> </div>
                <div class = "dz-details">
                    <div class = "dz-filename"> <span class= "uploading"> Uploading - </span> <span data-dz-name = " "> </span> </div>
                </div>
                <div class = "dz-progress"> <span class = "dz-upload" data-dz-uploadprogress = " "> </span> </div>
                <div class = "dz-error-message"> <span data-dz-errormessage = " "> </span> </div>
            </div>
        </div>
<script>
var dropzone = new Dropzone('.demo-upload', {
  url: "/upload/",      
  maxFilesize: 4,
  addRemoveLinks: true,
  acceptedFiles: ".jpeg, .jpg, .png, .gif, .WebP, .svg",
  previewTemplate: document.querySelector('#preview-template').innerHTML,
  parallelUploads: 2,
  thumbnailHeight: 50,
  thumbnailWidth: 50,
  maxFilesize: 1,
  filesizeBase: 100000000000,
  success: function(file, response) {
   file.previewElement.classList.add("image__open");
 },
 thumbnail: function(file, dataUrl) {
  if (file.previewElement) {
    file.previewElement.classList.remove("dz-file-preview");
    var images = file.previewElement.querySelectorAll("[data-dz-thumbnail]");
    for (var i = 0; i < images.length; i++) {
      var thumbnailElement = images[i];
      thumbnailElement.alt = file.name;
      thumbnailElement.src = dataUrl;
    }
    setTimeout(function() { file.previewElement.classList.add("dz-image-preview"); }, 800);
  }
}

});
var minSteps = 6,
maxSteps = 100,
timeBetweenSteps = 300,
bytesPerStep = 10000;
dropzone.uploadFiles = function(files) {
  var self = this;
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    totalSteps = Math.round(Math.min(maxSteps, Math.max(minSteps, file.size / bytesPerStep)));
    for (var step = 0; step < totalSteps; step++) {
      var duration = timeBetweenSteps * (step + 1);
      setTimeout(function(file, totalSteps, step) {
        return function() {
          file.upload = {
            progress: 100 * (step + 1) / totalSteps,
            total: file.size,
            bytesSent: (step + 1) * file.size / totalSteps
          };
          self.emit('uploadprogress', file, file.upload.progress, file.upload.bytesSent);
          if (file.upload.progress == 100) {
            file.status = Dropzone.SUCCESS;
            self.emit("success", file, 'success', null);
            self.emit("complete", file);
            self.processQueue();
          }
        };
      }(file, totalSteps, step), duration);
    }
  }
}
</script>
</body>
</html>

Explanation:

In the above example, we have created an example of an Upload image with a progress bar using jQuery. In this, we also have an option to remove the uploaded file.

Output:

Following is the output of this example.

Upload image with progress bar using jQuery

Example 2:

<! DOCTYPE html>
<html>
	<head>
		<title> Upload image with progress bar using jQuery
 Example </title>
		<meta charset = "UTF-8" />
	<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1.0 ,user-scalable=no">
<style>
#up-wrap {
  font-family: arial, sans-serif;
  box-sizing: border-box;
}
h2  {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
}
#up-wrap * {
  font-family: arial, sans-serif;
  box-sizing: border-box;
}
h1  {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
}
#up-wrap {
  width: 500px;
  padding: 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.4);
}
#up-progress, #up-bar, #up-percent { height: 30px; }
#up-progress {
  position: relative;
  background: #fff;
}
#up-bar {
  background: #d3e3ff;
  width: 0;
  transition: width 0.5s;
}
body {
  background: hsl(217.6,100%,80%);
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  padding-top: 5em;
  display: flex;
  flex-flow: wrap column;
  justify-content: center;
  align-items: center;
}
#up-percent {
  position: absolute; top: 0; left: 0;
  width: 100%; display: flex;
  align-items: center; justify-content: center;
}
#up-file { display: none; }
#up-label {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  color: #fff;
  border: 1px solid #dfdfdf;
  background: #296cd0;
  cursor: pointer;
}
#up-file:disabled ~ #up-label { background: #b1b1b1; }
body {
  display: flex;
  align-items: center; justify-content: center;
  min-height: 100vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#upload {
  width: 100%; height:100px;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 640 512" width="100" xmlns="http://www.w3.org/2000/svg"><path d="M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4zM393.4 288H328v112c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V288h-65.4c-14.3 0-21.4-17.2-11.3-27.3l105.4-105.4c6.2-6.2 16.4-6.2 22.6 0l105.4 105.4c10.1 10.1 2.9 27.3-11.3 27.3z" /></svg>');
  background-repeat: no-repeat;
  background-position: center;
}
#up-wrap { text-align: center; }
#up-wrap h1 { margin: 0 0 40px 0; }
#up-demo { margin-top: 10px; }
#code-boxx {
  font-weight: 600;
  margin-top: 50px;
}
#code-boxx a {
  display: inline-block;
  padding: 5px;
  text-decoration: none;
  background: #b90a0a;
  color: #fff;
}
</style>
<div id = "up-wrap">
  <div id = "upload"> </div>
  <h1> Example </h1>
 <h1> Upload image with progress bar using jQuery </h1>
  <div id = "up-progress">
    <div id = "up-bar"> </div>
    <div id = "up-percent"> 0% </div>
  </div>
  <input type = "file" id = "up-file" >
  <label for = "up-file" id = "up-label">
    Select File
  </label>
</div>
<script>
var uprog = {
  hBar : null,    
  hPercent : null, 
  hFile : null,    
  init : () => {
    uprog.hBar = document.getElementById("up-bar");
    uprog.hPercent = document.getElementById("up-percent");
    uprog.hFile = document.getElementById("up-file");
    uprog.hFile.onchange = uprog.upload;
    uprog.hFile.disabled = false;
  },
  update : (percent) => {
    percent = percent + "%";
    uprog.hBar.style.width = percent;
    uprog.hPercent.innerHTML = percent;
    if (percent == "100%") { uprog.hFile.disabled = false; }
  },
    upload : async () => {
    let file = uprog.hFile.files[0];
    uprog.hFile.disabled = true; 
    uprog.hFile.value = ""; 
    await new Promise(e=>{setTimeout(e,500)});
    uprog.update(25);
    await new Promise(e=>{setTimeout(e,500)});
    uprog.update(50);
    await new Promise(e=>{setTimeout(e,500)});
    uprog.update(75);
    await new Promise(e=>{setTimeout(e,500)});
    uprog.update(100);
        let xhr = new XMLHttpRequest(),
        data = new FormData();
    data.append("upfile", file);
    xhr.open("POST", "upload.php");
    let percent = 0, width = 0;
    xhr.upload.onloadstart = (evt) => { uprog.update(0); };
    xhr.upload.onloadend = (evt) => { uprog.update(100); };
    xhr.upload.onprogress = (evt) => {
      percent = Math.ceil((evt.loaded / evt.total) * 100);
      uprog.update(percent);
    };
       xhr.onload = function () {
      if (this.response!= "OK" || this.status!=200) {
        console.log(this);
        console.log(this.response);
        console.log(this.status);
      } else {
        uprog.update(100);
             }
    };
    xhr.send(data);
  }
};
window.addEventListener("load", uprog.init);
</script>
</body>
</html>

Explanation:

In the above example, we have created an example of an Upload image with a progress bar using jQuery.

Output:

Following is the output of this example.

Example 3:

<! DOCTYPE html>
<html>
	<head>
		<title> Upload image with progress bar using jQuery
 Example </title>
		<meta charset = "UTF-8" />
	<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1.0 ,user-scalable=no">
<link href = "https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css"> 
<link href = "https://fonts.googleapis.com/css?family=Roboto" rel = "stylesheet"> 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"> </script> 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<style>
@import url('https://fonts.googleapis.com/css?family=Catamaran');
body {
  background: hsl(217.6,100%,80%);
  font-family: monospace;
  padding-top: 5em;
  display: flex;
  flex-flow: wrap column;
  justify-content: center;
  align-items: center;
}
h2  {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
}
h1 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
}
</style>
<body>
<h1> Example </h1>
 <h2> Upload image with progress bar using jQuery </h2>
<form id = "upload_form" enctype = "multipart/form-data" method = "post">
  <input type = "file" name = "file1" id = "file1" onchange = "uploadFile()"> <br>
  <progress id = "progressBar" value = "0" max = "100" style = "width:300px;"> </progress>
  <h3 id="status"> </h3>
  <p id = "loaded_n_total"> </p>
</form>
<script>
function _(el) {
  return document.getElementById(el);
}
function uploadFile() {
  var file = _("file1").files[0];
  var formdata = new FormData();
  formdata.append("file1", file);
  var ajax = new XMLHttpRequest();
  ajax.upload.addEventListener("progress", progressHandler, false);
  ajax.addEventListener("load", completeHandler, false);
  ajax.addEventListener("error", errorHandler, false);
  ajax.addEventListener("abort", abortHandler, false);
  ajax.open("POST", "file_upload_parser.php"); 
  ajax.send(formdata);
}
function progressHandler(event) {
  _("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
  var percent = (event.loaded / event.total) * 100;
  _("progressBar").value = Math.round(percent);
  _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
}
function completeHandler(event) {
  _("status").innerHTML = event.target.responseText;
  _("progressBar").value = 0; 
}
function errorHandler(event) {
  _("status").innerHTML = "Upload Failed";
}
function abortHandler(event) {
  _("status").innerHTML = "Upload Aborted";
}
</script>
</body>
</html>

Explanation:

In the above example, we have created an example of Upload image with progress bar using jQuery. In this leading progress bar display the percentage

Output:

Following is the output of this example.

Next TopicHow to add options to a select element using jQuery