javascript 的File对象在IE中不支持

javascript 的File对象在IE中不支持

月光魔力鸭

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


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
我们经常会有判断一个数值是素数的需求,那么我们如何来实现呢?
前端时间搞了个小转码,放在后台,但是特别占带宽,想着能不能从前台把这个事搞定呢?读取图片的二进制,然后将字节流处理后重新生成图片展示处理啊。
jsQR 是一款纯粹的由javascript实现的二维码识别库,可以在浏览器端使用,也可以在后端node.js环境使用。我之前使用过其他的识别库,例如:qrcode-reader 或其他,在使用上都比较麻烦,而且识别率并不高。jsQR是后来发现的,感觉(没有实际对比验证)jsQR识别率要更高些,使用起来也更简单,不需要安装其他依赖软件。
本文概括了递归、闭包、原型、继承,理清这些基本的概念,有助于你接纳更多的东西,我们会在下一个章节对函数进行更深入的讨论。
偶尔练习下canvas,这里简单记录下常用API,防止遗忘..加深记忆..努力提高..争取突破...daydayup
最近做个nodejs的项目,使用了thinkjs 3.0 的框架,编辑器为vs code ,之前用的好好的,每次 . 后都有提示的,可是使用了多模块后发现.. model的提示没有了..
问题是由一个BUG引起的,功能中有使用国际化组件,用的是jquery.i18n,在chrome上、ff上都没有什么问题,问题出在了IE上。万恶的IE..
在我们web开发过程中经常会碰到针对table的一些dom操作,这里整理一下关于这方面的知识点。当然我们可以通过jquery这样的插件来处理,或许会更简单一些,不过现在简单说下原生JS是如何操作的