javascript 的File对象在IE中不支持

javascript 的File对象在IE中不支持

月光魔力鸭

2020-03-03 10:43 阅读 932 喜欢 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


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
web开发中,前台有时候会需要一个随机数或序列,通常来说,这个随机数可能只在当前页面中使用,并不需要太过严格,大体上重复率低即可。
问题是由一个BUG引起的,功能中有使用国际化组件,用的是jquery.i18n,在chrome上、ff上都没有什么问题,问题出在了IE上。万恶的IE..
本文概括了递归、闭包、原型、继承,理清这些基本的概念,有助于你接纳更多的东西,我们会在下一个章节对函数进行更深入的讨论。
通过修改数据库编码处理存储emoj表情导致的报错问题。
在使用echarts 来做统计报表的时候,由于数量较多,准备将同类型的相同属性抽取出来,然后用来做默认属性的。结果发现一个问题
项目中需要使用treegrid,找了下easyui 和 ext都有,但是项目用的框架是 byyui,如果为了treegrid 就把这些都加载的话,感觉不太合算。找了大家常用的基于jquery的treegrid.
之前一直没面试过前端,今天有一个,先整理下需要问的问题和答案。这里都是一些简单的问题,关于当下比较流行的框架并没有涉及到..
最近做个nodejs的项目,使用了thinkjs 3.0 的框架,编辑器为vs code ,之前用的好好的,每次 . 后都有提示的,可是使用了多模块后发现.. model的提示没有了..