图像上传并转换为无法在ie9中工作的base64

时间:2015-07-31 04:00:20

标签: javascript internet-explorer-9

我正在尝试从本地磁盘上传图像并通过canvas转换为base 64,以通过ajax将该base64字符串传递给第三方。

下面的代码在其他浏览器中工作但在ie9中失败。它给出了错误" SCRIPT5009:' FileReader'未定义"。请让我知道我应该使用什么代码来处理ie9

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>Image Upload</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    </head>
    <body>
        <input type="file" id="imageLoader" name="imageLoader"/>
        <label id="base64Text"></label><br/>
        <canvas id="imageCanvas"></canvas>
        <script>
            var imageLoader = document.getElementById('imageLoader');
            imageLoader.addEventListener('change', handleImage, false);
            var canvas = document.getElementById('imageCanvas');
            var ctx = canvas.getContext('2d');

            function handleImage(e){
                var reader = new FileReader();
                reader.onload = function(event){
                    var img = new Image();
                    img.onload = function(){
                        canvas.width = img.width;
                        canvas.height = img.height;
                        ctx.drawImage(img,0,0);
                    }
                    img.src = event.target.result;
                }
                reader.readAsDataURL(e.target.files[0]);
                //base64

                var base64 = canvas.toDataURL();
                $('#base64Text').html('Base64: ' + base64);
            }
        </script>
    </body>
</html>

0 个答案:

没有答案