jQuery AJAX image upload - check browser support

问题

I use this plugin: canvasResize to resize images client side and upload them.

This is the code:

HTML

<input name="photo" id="input" type="file" accept="image/*"/>

$('input[name=photo]').change(function(e) {
    var file = e.target.files[0];


    $.canvasResize(file, {
        width: 0,
        height: 540,
        crop: false,
        quality: 90,
        //rotate: 90,
        callback: function(data, width, height) {


            // IMAGE UPLOADING
            // =================================================

            // Create a new formdata
            var fd = new FormData();
            // Add file data
            var f = $.canvasResize('dataURLtoBlob', data);
            f.name = file.name;
            fd.append($('#input').attr('name'), f);

            $.ajax({
                url: 'test2.php',
                type: 'POST',
                data: fd,
                contentType: false,
                processData: false,
                success: function(data) {
                    alert('geht');
                }
            })

            // /IMAGE UPLOADING
            // =================================================
        }
    });

});

It works on the most browsers, but how could I detect if it would not work on pageload? I thought maybe it's because these browsers don't support canvas but that's not the case because I did:

function isCanvasSupported(){
  var elem = document.createElement('canvas');
  return !!(elem.getContext && elem.getContext('2d'));
}

if (isCanvasSupported())
{
    alert('works');
}

And it works everywhere.

So any idea how I could detect the shabby browsers before the user select an image?

EDIT:

Nothing works directly after callback: function(data, width, height) {, I tried to alert something. Any ideas??? Please????

来源：https://stackoverflow.com/questions/32618651/jquery-ajax-image-upload-check-browser-support

标签

javascript