javascript 的File对象在IE中不支持

javascript 的File对象在IE中不支持

月光魔力鸭

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


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
近期需求:将一棵树导出到excel中,树是ztree,通过插件Table2excel导出table到excel中。
web开发中,前台有时候会需要一个随机数或序列,通常来说,这个随机数可能只在当前页面中使用,并不需要太过严格,大体上重复率低即可。
有时候浏览网页经常会看见一些页面出现一些打字的效果,那么是怎么实现的呢?
最近一直在想着抓一些网盘数据,进行资料归拢,可是当我真正开始的时候.. 还是遇到了反爬,当然我本身就有心理预期,这是肯定会碰到的,只是没想到会在代理IP上耗费这么久,之前的时候也处理过代理IP ,可是由于一知半解,导致很多配置都不理解,debug全靠猜...
web网站上总会有在文本域中提交代码的操作,那么如何处理呢?
在我们web开发过程中经常会碰到针对table的一些dom操作,这里整理一下关于这方面的知识点。当然我们可以通过jquery这样的插件来处理,或许会更简单一些,不过现在简单说下原生JS是如何操作的
Question from codewar,about all of array combinations.
在项目开发过程中,分页是少不了的,之前封装了一个分页组件,样式是基于bootstrap的样式,当然也可以自己来修改