Is there a quick way to add a picture on the client side when an image is selected?

Use the following scripts.

html script

<div class="container-fluid">
<div class="row">
<div class="col-sm-6" > <form onsubmit="mindeeSubmit(event)" >
<label for="my-file-input">Upload Reciept</label>
<div class="col-sm-6 input-group">
<div class="input-group-btn">
<label for="my-file-input" class="btn btn-primary pull-left btn-lg">Get Picture Of Receipt</label>
<input id="my-file-input" name="file" type="file" class="btn btn-default attachment_upload" style="visibility:hidden;" capture/>
</div>
<input type="submit" class="btn btn-success btn-lg pull-right" value="Process" />
</div>
</form></div>
<div class="col-sm-6"><div id="display" class="thumbnail img-preview img-responsive img-thumbnail"></div><img class="thumbnail img-preview img-responsive img-thumbnail" src="https://a1sold.com/android-chrome-512x512.png" title="Preview Logo"></div>
</div>
</div>

Then use this javascript to process it.

<script>
$(document).ready(function() {
var brand = document.getElementById(‘my-file-input’);
brand.className = ‘attachment_upload’;
brand.onchange = function() {
document.getElementById(‘display’).value = this.value.substring(12);
};

function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();

reader.onload = function(e) {
$(‘.img-preview’).attr(‘src’, e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
$(“#my-file-input”).change(function() {
readURL(this);
});
});
</script>
That is all you have to do to show an image in html with JavaScript.