javascript 的File对象在IE中不支持

javascript 的File对象在IE中不支持

月光魔力鸭

2020-03-03 10:43 阅读 524 喜欢 1 File对象 兼容性

业务中有一段涉及到处理canvas的图片然后将内容进行上传,后测试发现在IE中不好使哎... 查找了下MDN,发现中文和英文页面对于该对象的兼容性竟然不同。

在IE系列中(edge不算),File对象是不支持的,检测方法,typeof 即可。

chrome或ff IE

问题来了,我原先的代码是通过File对象添加到FormData中,然后提交到后台,不支持File怎么办?起码要IE10 /11能用吧。

解决方法:通过Blob来添加到FormData中

原有代码

var id = canvas.getAttribute('id');
var dataurl = canvas.toDataURL('image/png');
var arr = dataurl.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var suffix = mime.split('/')[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
  u8arr[n] = bstr.charCodeAt(n)
}
//注意此处
var file = new File([u8arr], id+'.'+suffix, {type: mime});
var fd = new FormData();
fd.append('file',file);
fd.append("module",'read');
return new Promise(function(resolve,reject){
    $.ajax({
        type : 'post',
        url : base+'***',
        data : fd,
        processData: false,
        contentType:false,
        success : function(res){
            res = JSON.parse(res);
            if(res.state == 'SUCCESS'){
                resolve(res);
            }else{
                reject(res.msg);
            }
        },
        error : function(e){
            reject("图片信息保存失败,请刷新后重试!");
        }
    });
});

替换Blob后的代码

var id = canvas.getAttribute('id');
var dataurl = canvas.toDataURL('image/png');
var arr = dataurl.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var suffix = mime.split('/')[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
  u8arr[n] = bstr.charCodeAt(n)
}
//从此处开始处理blob
var blob = null;
try{
    blob = new Blob([u8arr.buffer],{type : mime});
}catch(e){
    var BlobBuilder = window.BlobBuilder = (
        window.BlobBuilder ||
        window.WebKitBlobBuilder ||
        window.MozBlobBuilder ||
        window.MSBlobBuilder
    );
    if (e.name === "TypeError" && BlobBuilder) {
        var builder = new BlobBuilder();
        builder.append(buff);
        blob = builder.getBlob(fileType);
    }
}
var fd = new FormData();
//一定要注意这里。
fd.append('file',blob,id+'.'+suffix);
fd.append("module",'read');
return new Promise(function(resolve,reject){
    $.ajax({
        type : 'post',
        url : base+'***',
        data : fd,
        processData: false,
        contentType:false,
        success : function(res){
            res = JSON.parse(res);
            if(res.state == 'SUCCESS'){
                resolve(res);
            }else{
                reject(res.msg);
            }
        },
        error : function(e){
            reject("图片信息保存失败,请刷新后重试!");
        }
    });
});

书写的时候请注意此处:fd.append('file',blob,fileName);

参考: https://developer.mozilla.org/en-US/docs/Web/API/Blob https://developer.mozilla.org/en-US/docs/Web/API/File/File#Browser_compatibility

转载请注明出处: https://chrunlee.cn/article/js-file-blob.html


感谢支持!

赞赏支持
提交评论
评论信息(请文明评论)
暂无评论,快来快来写想法...
推荐
前端时间搞了个小转码,放在后台,但是特别占带宽,想着能不能从前台把这个事搞定呢?读取图片的二进制,然后将字节流处理后重新生成图片展示处理啊。
项目中需要使用treegrid,找了下easyui 和 ext都有,但是项目用的框架是 byyui,如果为了treegrid 就把这些都加载的话,感觉不太合算。找了大家常用的基于jquery的treegrid.
需求如下:有一张大图,需要显示大图中的一小部分,目前能知道的时候小图的宽高和坐标,同时大图有一个旋转角度可以知道,目标就是把小图正确的显示出来。
问题是由一个BUG引起的,功能中有使用国际化组件,用的是jquery.i18n,在chrome上、ff上都没有什么问题,问题出在了IE上。万恶的IE..
开发的项目中有使用到微信开发,由于之前偶尔才用一次,也是用的别人的地址和测试号,这里记录下自己的操作。防止后续遗忘。
在今天之前,我对canvas中rotate其实是一脸蒙逼的... 虽然之前有做过图片旋转,但那是在他人的基础上直接修改的,至于为啥会这样..讲真,还真没注意过,但是今天又需要用到这块了,实在搞不定了,找了各种资料,终于明白了.. 坐标系的问题。
在文件上传的时候,经常会对文件的mime进行限制,比如图片 image/jpg 等,让用户可以选择图片,而不是其他的文件。
之前一直没面试过前端,今天有一个,先整理下需要问的问题和答案。这里都是一些简单的问题,关于当下比较流行的框架并没有涉及到..