Resize image and keep original on upload

Question

I'm using blueimp's jQuery file uploader and I'm wondering how I could resize an image to a specific width upon upload, put it into a specific directory, all while keeping the original image.

Here's what I have so far:

$('#fileupload').fileupload({
    dataType: 'json',
    add: function(e, data) {
        var uploadErrors = [];
        var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;

        if (data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
            uploadErrors.push('Invalid file type.');
        } else if (data.originalFiles[0]['size'] > 1000000) {
            uploadErrors.push('Image over size.');
        }

        if (uploadErrors.length > 0) {
            $('.errors').html(uploadErrors);
        } else {
            data.submit();
        }                    
    },
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('.progress .bar').css('width', progress + '%');
    }
});

Any help is appreciated.

Answer 1

You can achieve the resize with PHP-GD.

There are several references if you google it. Here is one.