使用jQuery和PHP上传大型图片

Question

I am using jQuery and PHP to upload images to the server and return a JSON of the cropped image.
My JavaScript code is:

$('document').ready(function () {

            $('#stat').hide();

            $('#file').on('change', function () {
                var fd = new FormData($('#target')[0]);
                $('#display > img').remove();
                $('#stat').show();

                $.ajax({
                    url: '<?php echo base_url('crop/upload') ?>',
                    type: "POST",
                    data: fd,
                    timeout: 1000 * 100,
                    contentType: false,
                    processData: false,
                    success: function (data, textStatus, jqXHR) {

                        $('#stat').hide();
                        $('div > img').remove();
                       console.log(data);
                        console.log(data[1].thumb);
                        $('#display > img').remove();
                        var img = $('<img>');
                        img.attr('src', data[1].thumb);
                        img.appendTo('#display')
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                       console.log(textStatus);
                    },
                    dataType: 'json'
                })

            })

        })

But whenever the image size is larger than 2 MB the, I see a parse error in the JS console. I tried to set a timeout, but it didn't work.

What is the problem? Does the browser sets a timeout?

How can I enable users to upload large images without a parse error ?

Answer 1

increasing the memory allocated for PHP will solve the issue.

you can do it by:

1- Edit php.ini

memory_limit = 128M ; Or put code below to .htaccess

php_value memory_limit 128M

2-If you oftenly get this error and solution above isn't work, contact your host. In most shared hosting, there is maximum memory_limit. You can't set memory-limit to 64Mb if you get max 32Mb.