javascript 的File对象在IE中不支持

javascript 的File对象在IE中不支持

月光魔力鸭

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


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
如何通过js调用本地摄像头呢?获取后如何对视频进行截图呢?在这里跟大家做一个简易的Demo来实现以上几个功能。
在我们web开发过程中经常会碰到针对table的一些dom操作,这里整理一下关于这方面的知识点。当然我们可以通过jquery这样的插件来处理,或许会更简单一些,不过现在简单说下原生JS是如何操作的
今天刷codewars的题目的时候碰到一个通过js来实现字符串转base64的题目,base64虽然在js或nodejs中经常用,但是我还真没有仔细去看过原理以及如何实现,这回绕不过去了,赶紧找了找资料看了下。
在项目开发过程中,分页是少不了的,之前封装了一个分页组件,样式是基于bootstrap的样式,当然也可以自己来修改
在开发过程中多个页面使用的一个小工具类,简单完善了下,还算不错,给各位提供下小思路。
错误:The operation is insecure . 在使用canvas的 toDataUrl的时候报错,看了很多资料,基本上都说是设置跨域,但是我一直都有的啊。其实,只是顺序错了,setAttribute('crossOrigin','Anonymous') 要在设置 src之前设置。
codewars上的一个题目,这里记录下解决方法。
做作业的时候,需要在手机上预览下,但是发现如果想在移动端上展示A4样子的作业还是挺麻烦的,最后还是准备通过图片来展示,然后移动端缩放呗。。