I am having trouble with resizing an image preview before submitting it. Despite setting the width and height to 1px in both the div and image, it still displays at its normal dimensions.
$(function() {
var imagesPreview = function(input, placeToInsertImagePreview) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
$($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
}
reader.readAsDataURL(input.files[i]);
}
}
};
$('#upload-image').on('change', function() {
imagesPreview(this, 'img.image');
});
});div.img_container {
max-width: 1px;
max-height: 1px;
}
img.image {
width: 1px;
height: 1px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action='upload.php' method='post' enctype='multipart/form-data'>
<input id='upload-image' type='file' name='files[]' multiple>
<input type='submit' value='Upload'>
</form>
<div class='img_container'><img class='image'></div>