2
In a few minutes looking for a way to show the preview of an image before the upload of the same, I found the magnificent solution:
$("##ID DO INPUT FILE##").change(function (event) {
var reader = new FileReader();
$(reader).load(function (event) {
$("##ID DO ELEMENTO IMG##").attr("src", event.target.result);
});
reader.readAsDataURL(event.target.files[0]);
});
But I use a library imageresizing.net who wanted to use one of its features so that the preview be shown with Crop and aligned to the center.
In my case I am using the code below and did not succeed because the output of the image is a Base64
function readfile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#image_preview').attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0] + "?w=340&h=260&mod=crop&format=png");
}
}
$("#upload").change(function() {
readfile(this);
});
Is there any other way to show the preview where I can enjoy the imageresizing?
You managed to solve the problem?
– Miguel Angelo
I ended up solving my problem using the upload plugin http://jasny.github.io/bootstrap/javascript/#fileinput was what most fit my need.
– Hermes Autran
Could you post an answer? So everyone can know that this issue no longer needs attention, and besides, anyone who needs it in the future can use the same solution.
– Miguel Angelo