<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="file" id="file" name="file" accept="image/*">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/img-compressor/dist/img-compressor.js"></script>
<script>
document.getElementById('file').addEventListener('change', function(event) {
var file = event.target.files[0];
var imgCompressor = new ImgCompressor.Create({
width: 500
});
imgCompressor.compress(file, {
success: function(result) {
const formData = new FormData();
formData.append('file', result, result.name);
$.ajax({
url: '/upload',
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false
})
.done(function(res) {
})
.fail(function(err) {});
},
error: function(err) {
console.log(err);
}
})
})
</script>
</body>
</html>