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

问题描述

我使用此插件： canvasResize 调整图片客户端的大小并上传。

这是代码：

HTML

 < input name =photoid =inputtype =fileaccept =image / */> 
  

JS

  $（'input [name = photo]'）。change（function（e）{
 var file = e.target.files [0]; 
 
 
 $ .canvasResize（文件，{
 width：0，
 height：540，
 crop：false，
 quality：90，
 // rotate：90，
 callback：function（data，width，height）{
 
 
 //图片上传
 // ====== ========================================= 
 
 //创建一个新的formdata 
 var fd = new FormData（）; 
 //添加文件数据
 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上传
 // ==================== =========================== 
} 
}）; 
 
}）; 
  

它适用于大多数浏览器，但是如何检测它是否会在pageload上工作？我想也许是因为这些浏览器不支持canvas，但是不是这样，因为我做了：

  function isCanvasSupported（）{ 
 var elem = document.createElement（'canvas'）; 
 return !!（elem.getContext& elem.getContext（'2d'））; 
} 
 
 if（isCanvasSupported（））
 {
 alert（'works'）; 
} 
  

它随处可用。

那么任何想法如何在用户选择图像之前检测破旧的浏览器？

编辑： b
$ b

callback：function（data，width，height）{后，我没有什么可以直接工作的。有任何想法吗？？？请????

解决方案

这可能是在浏览器中支持FormData接口的问题。您可以在此处查看兼容性表。

编辑：您可以使用简单的代码片段测试FormData支持：

  if（new FormData ）{console.log（'FormData interface is supported'）;} 
  

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/*"/>

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?

EDIT:

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

解决方案

It might be problem with FormData interface support in browsers. You can check compatibility table here .

EDIT: You can test FormData support with simple snippet:

if (new FormData()) {console.log('FormData interface is supported');}

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