junjchen/gzip-file-ajax.html

## gzip-file-ajax.html
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.1/pako.min.js"></script>
    </head>
    <body>
        <form id="my-form">
            <input type="file" name="file">
            <input type="submit">
        </form>
    </body>
    <script>
        $(function() {
           $('#my-form').on('submit', function(evt) {
               evt.preventDefault();
               var $input = $(this).find('input[type=file]');
               var file = $input.prop('files')[0];
               var reader = new FileReader();
               reader.onload = function() {
                   var convertedData = new Uint8Array(reader.result);
                   var zipped = pako.gzip(convertedData, {to: 'Uint8Array'});
                   var convertedZip = zipped.buffer;
                   var blob = new Blob([convertedZip], {type: file.type});
                   var formData = new FormData();
                   formData.append($input.prop('name'), blob, file.name);
                   formData.append('test', 'ok');
                   $.ajax({
                       url: 'postfile',
                       type: 'POST',
                       data: formData,
                       contentType: false,
                       processData: false,
                       headers: {
                           'Content-Encoding': 'gzip'
                       }
                   }).done(function(data) {
                       console.log(data);
                   }).fail(function(err) {
                       console.error(err);
                   });
               }
               reader.readAsArrayBuffer(file);
           })
        });
    </script>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.1/pako.min.js"></script>
	</head>
	<body>
	<form id="my-form">
	<input type="file" name="file">
	<input type="submit">
	</form>
	</body>
	<script>
	$(function() {
	$('#my-form').on('submit', function(evt) {
	evt.preventDefault();
	var $input = $(this).find('input[type=file]');
	var file = $input.prop('files')[0];
	var reader = new FileReader();
	reader.onload = function() {
	var convertedData = new Uint8Array(reader.result);
	var zipped = pako.gzip(convertedData, {to: 'Uint8Array'});
	var convertedZip = zipped.buffer;
	var blob = new Blob([convertedZip], {type: file.type});
	var formData = new FormData();
	formData.append($input.prop('name'), blob, file.name);
	formData.append('test', 'ok');
	$.ajax({
	url: 'postfile',
	type: 'POST',
	data: formData,
	contentType: false,
	processData: false,
	headers: {
	'Content-Encoding': 'gzip'
	}
	}).done(function(data) {
	console.log(data);
	}).fail(function(err) {
	console.error(err);
	});
	}
	reader.readAsArrayBuffer(file);
	})
	});
	</script>
	</html>