How to show progress bar with percentage while submitting a form which have large base64 encoded image

Question

A form has base64 encoded image. When form is submitted, it takes time. It takes time in uploading base64 encoded image. I can see the message in chrome in left down corner as Uploading(x%)..

<form id="resizeImageForm" action="resizeImage" method="post"> 
<input type="hidden" id="resizeImage" name="resizeImage"
value="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK....."> 
<input type="submit" class="btn login_btn" value="Submit"> 
</form>

Progress bar which shows the percentage when form is submitted.

You'll need to make an ajax request: see this answer: https://stackoverflow.com/a/10811427/2181514 — freedomn-m, Jun 24 '19 at 09:36
I have to perform some action on this image on the next jsp page. Through Ajax call, this is not possible or I have to do some manipulation after Ajax call to have this image on next page which is not a good idea. Is there any way with form submission without Ajax call. — user1773579, Jul 15 '19 at 06:31

Bilal Siddiqui · Answer 1 · 2019-10-19T07:20:59.457

You can use Malsup's form plugin to acheive this:

<script src="http://malsup.github.com/jquery.form.js"></script>

Your HTMl will look like:

<style>
   .progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
   .bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
   .percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>

<form action="resizeImage" method="post" enctype="multipart/form-data">
    <input type="file" name="myfile"><br>
    <input type="submit" value="Upload File to Server">
</form>

<div class="progress">
    <div class="bar"></div >
    <div class="percent">0%</div >
</div>

And then below jQuery code intercepts the form submission to display progress bar

$(function() {

    var bar = $('.bar');
    var percent = $('.percent');
    var status = $('#status');

    $('form').ajaxForm({
        beforeSend: function() {
            status.empty();
            var percentVal = '0%';
            bar.width(percentVal);
            percent.html(percentVal);
        },
        uploadProgress: function(event, position, total, percentComplete) {
            var percentVal = percentComplete + '%';
            bar.width(percentVal);
            percent.html(percentVal);
        },
        complete: function(xhr) {
            status.html(xhr.responseText);
        }
    });
});

Hope this helps :-)

How to show progress bar with percentage while submitting a form which have large base64 encoded image

1 Answers1