jQuery的AJAX的图片上传 - 检查浏览器支持 [英] jQuery AJAX image upload - check browser support

问题描述

我使用这个插件： canvasResize 来调整图像的客户端，并将其上传

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

这是在code：

HTML

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

JS

$('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?

编辑：

没有在作品直接的回调：功能（数据，宽，高）{，我想提醒的东西。有任何想法吗？？？请????

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

推荐答案

这不调整图像客户端甚至无法检索图像类型，这样浏览器：

The browsers which fail to resize images client side can't even retrieve the image type so:

var type = file.type;

    if(type == 'image/jpeg' || type == 'image/jpg' || type == 'image/png')
    {

    }
    else
    {
        alert('not supported');
        return false;
    }

做任何人有一个想法，我怎么能测试在页面加载？

Do anyone have an idea how I can test that on pageload?

这篇关于jQuery的AJAX的图片上传 - 检查浏览器支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！